/* Layout: a stone-framed play window with a carved side panel; on phones the panel stacks under the map */
:root{
  --stone:#1f1b17; --slab:#2c2621; --slab-2:#3a322b; --edge:#5a4a3a;
  --parch:#eadcbc; --muted:#a8977a; --gold:#e3b54f; --blood:#c84b3c; --moss:#86b25c; --sky:#7fb6d6;
  --display:"IM Fell English SC","Palatino Linotype",Palatino,Georgia,serif;
  --body:"Alegreya Sans","Trebuchet MS",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
html{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
#stage,#panel,.tabs,.slot,.dlg button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{background:var(--stone);color:var(--parch);font-family:var(--body);font-size:15px;overflow:hidden}
#app{height:100%;box-sizing:border-box;padding-block:12px;padding-inline:16px;display:grid;grid-template-columns:minmax(0,1fr) 336px;grid-template-rows:auto minmax(0,1fr);gap:10px 14px}
header{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0}
h1{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;margin:0;color:var(--gold);letter-spacing:.02em;text-wrap:balance}
.sub{color:var(--muted);font-size:14px}
.stats{margin-left:auto;display:flex;gap:14px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.stats b{color:var(--parch);font-weight:700}
.stats{align-items:center}
.gtop{padding:10px 14px 4px;display:grid;gap:6px;border-bottom:1px solid var(--edge)}
.gbar{height:6px!important;background:#14110e;border-radius:3px;overflow:hidden}
.gbar i{display:block;height:100%}
#guide.big{width:min(560px,calc(100vw - 24px));height:min(760px,calc(100vh - 24px));height:min(760px,calc(100dvh - 24px))}
.statline{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--edge)}
.statline b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.hbtn{background:var(--slab-2);color:var(--parch);border:1px solid var(--edge);border-radius:4px;padding:4px 10px;font:700 13px var(--body);cursor:pointer}
#settings.big{width:min(560px,calc(100vw - 24px));height:min(720px,calc(100vh - 24px));height:min(720px,calc(100dvh - 24px))}
.sset{background:#241f1b;border:1px solid #3d342c;border-radius:5px;padding:12px 14px;display:grid;gap:8px}
.sset h3{font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold);margin:0}
.sset p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.sset textarea{width:100%;box-sizing:border-box;min-height:84px;resize:vertical;background:#14110e;border:1px solid var(--edge);border-radius:4px;color:var(--parch);font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;padding:8px;word-break:break-all}
.sset textarea:focus{outline:2px solid var(--gold);outline-offset:-1px}
.sset .row{margin:0}
.sset .ok{color:#8fd16a}.sset .bad{color:#ff9a8a}
.sset.danger{border-color:#5a2f2a}
#view{min-height:0;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px}
#stage{position:relative;min-height:0;border:2px solid var(--edge);border-radius:6px;overflow:hidden;background:#173018;box-shadow:inset 0 0 0 1px #000}
#cv{display:block;width:100%;height:100%;touch-action:none;cursor:pointer;-webkit-touch-callout:none}
#hover{position:absolute;left:8px;top:6px;font-weight:700;font-size:15px;text-shadow:1px 1px 0 #000,0 0 3px #000;pointer-events:none;color:#fff}
#hover .o{color:#5fd8e0}#hover .n{color:#f2e35a}#hover .i{color:#f0a24b}
#hud{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none}
.bar{width:132px;height:18px;border:1px solid #000;background:#3a1210;position:relative;border-radius:3px;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#3fa042,#22702a);transition:width .2s}
.bar span{position:relative;display:block;text-align:center;font-size:12px;font-weight:800;line-height:16px;color:#fff;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums}
#toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-family:var(--display);font-size:26px;color:var(--gold);text-shadow:2px 2px 0 #000,0 0 12px rgba(0,0,0,.8);pointer-events:none;opacity:0;transition:opacity .4s;text-align:center;white-space:nowrap}
#zoom{position:absolute;right:8px;bottom:8px;display:flex;gap:6px}
#zoom button{width:34px;height:34px;border-radius:50%;border:1px solid var(--edge);background:rgba(31,27,23,.85);color:var(--parch);font-size:18px;font-weight:800;cursor:pointer}
#chat{height:96px;overflow-y:auto;background:var(--slab);border:2px solid var(--edge);border-radius:6px;padding:6px 10px;box-sizing:border-box;font-size:14px;line-height:1.35}
#chat p{margin:0}#chat .lv{color:var(--gold)}#chat .bad{color:#ff8a7a}#chat .sys{color:var(--sky)}
#panel{min-height:0;display:flex;flex-direction:column;background:var(--slab);border:2px solid var(--edge);border-radius:6px;overflow:hidden}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-bottom:2px solid var(--edge)}
.tabs button{font-family:var(--display);font-size:15px;padding:9px 2px;background:var(--slab-2);color:var(--muted);border:0;border-right:1px solid var(--edge);cursor:pointer}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected="true"]{background:var(--slab);color:var(--gold)}
button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.pane{flex:1;min-height:0;overflow-y:auto;padding:12px}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap}
.lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:4px;overflow:hidden}
.seg button{background:transparent;color:var(--muted);border:0;padding:5px 12px;font:600 13px var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--slab-2);color:var(--parch)}
.seg button.drop[aria-pressed="true"]{color:#ff9a8a}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.slot{aspect-ratio:1;max-width:100%;background:#241f1b;border:1px solid #3d342c;border-radius:4px;position:relative;padding:0;cursor:pointer}
.slot img{position:absolute;inset:10%;width:80%;height:80%}
.slot .q{position:absolute;left:3px;top:1px;font-size:12px;font-weight:800;color:#f2e35a;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums}
.slot:hover{border-color:var(--edge)}
.slot.empty{cursor:default}
.skills{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sk{background:#241f1b;border:1px solid #3d342c;border-radius:4px;padding:7px 9px;cursor:pointer;text-align:left;color:var(--parch);font:inherit}
.sk .t{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.sk .nm{font-weight:700;font-size:14px}
.sk .lv{font-variant-numeric:tabular-nums;font-weight:800;color:var(--gold)}
.sk .xb{height:4px;background:#14110e;border-radius:2px;margin-top:6px;overflow:hidden}
.sk .xb i{display:block;height:100%}
.detail{margin-top:10px;font-size:13px;color:var(--muted);min-height:2.6em;font-variant-numeric:tabular-nums}
.styles{display:grid;gap:6px}
.style{display:flex;justify-content:space-between;align-items:center;background:#241f1b;border:1px solid #3d342c;border-radius:4px;padding:9px 11px;color:var(--parch);font:inherit;cursor:pointer;text-align:left}
.style small{color:var(--muted)}
.style[aria-pressed="true"]{border-color:var(--gold);background:#2f281f}
dl{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:4px 12px;margin:14px 0;font-variant-numeric:tabular-nums}
dt{color:var(--muted)}dd{margin:0;text-align:right;font-weight:700}
.btn{background:var(--slab-2);color:var(--parch);border:1px solid var(--edge);border-radius:4px;padding:7px 12px;font:600 13px var(--body);cursor:pointer}
.btn.warn{color:#ff9a8a}
.note{font-size:13px;color:var(--muted);margin:0 0 10px;line-height:1.4}
.dlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,calc(100% - 24px));max-height:calc(100% - 24px);display:flex;flex-direction:column;background:var(--slab);border:2px solid var(--edge);border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.dlg .hd{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 14px;border-bottom:1px solid var(--edge)}
.dlg h2{font-family:var(--display);font-weight:400;font-size:21px;margin:0;color:var(--gold)}
.dlg .lvl{font-size:13px;color:var(--muted);margin-left:8px;font-family:var(--body)}
.dlg .list{overflow-y:auto;padding:8px;display:grid;gap:4px;min-height:0}
.rec{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;background:#241f1b;border:1px solid #3d342c;border-radius:4px;padding:5px 9px;color:var(--parch);font:inherit;text-align:left;cursor:pointer}
.rec img{width:34px;height:34px}
.rec .nm{font-weight:700;font-size:14px}.rec small{color:var(--muted);display:block;font-size:12px}
.rec .ct{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:800;font-size:13px}
.rec.no{opacity:.45}.rec.no .ct{color:var(--muted)}
.rec[aria-pressed="true"]{border-color:var(--gold);background:#2f281f;opacity:1}
.dlg .ft{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--edge);flex-wrap:wrap}
.dlg .sel{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step{display:inline-flex;align-items:center;border:1px solid var(--edge);border-radius:4px;overflow:hidden}
.step button{width:36px;height:34px;background:var(--slab-2);color:var(--parch);border:0;font-size:20px;font-weight:800;cursor:pointer}
.step button:disabled,.btn:disabled{opacity:.4;cursor:default}
.step output,.step input{min-width:38px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.step input{width:62px;height:34px;box-sizing:border-box;background:#1d1915;border:0;border-inline:1px solid var(--edge);color:var(--parch);font:800 15px var(--body);padding:0 4px;-moz-appearance:textfield}
.step input:focus{outline:2px solid var(--gold);outline-offset:-2px;background:#14110e}
.shoptabs{display:flex;gap:10px;align-items:center;padding:8px 10px 0}
.shoptabs .note{margin:0;font-size:12px}
#inv .slot{touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#inv .slot:not(.empty){touch-action:none}
.slot.lift{opacity:.35}.slot.over{border-color:var(--gold);background:#2f281f}
.menu{position:absolute;min-width:170px;max-width:calc(100% - 16px);background:var(--slab);border:2px solid var(--edge);border-radius:5px;box-shadow:0 8px 20px rgba(0,0,0,.6);z-index:5;overflow:hidden}
.menu .mh{font-family:var(--display);color:var(--gold);font-size:15px;padding:5px 10px;border-bottom:1px solid var(--edge);background:var(--slab-2)}
.menu button{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:#fff;font:600 14px var(--body);padding:6px 10px;text-align:left;cursor:pointer}
.menu button:hover,.menu button:focus-visible{background:#3a322b}
.menu img{width:22px;height:22px}.menu .i{color:#f0a24b}
#worldmap.big{width:min(1040px,calc(100vw - 24px));height:min(840px,calc(100vh - 24px));height:min(840px,calc(100dvh - 24px))}
.dlg.big{position:fixed;z-index:50}
#shade{position:fixed;inset:0;z-index:49;background:rgba(8,6,4,.72)}
.dlg{z-index:4}
@media (max-width:520px){#worldmap .lvl{display:none}}
.mapwrap{flex:1;min-height:0;padding:8px}
#mapcv{width:100%;height:100%;display:block;cursor:grab;touch-action:none;border-radius:4px;background:#cbb88f}
#mmwrap{position:relative;width:110px;height:110px;pointer-events:auto}#minimap{width:110px;height:110px;display:block;border-radius:50%;cursor:pointer;touch-action:none;box-shadow:0 2px 6px rgba(0,0,0,.5)}
#mmmap{position:absolute;left:-6px;bottom:-2px;width:32px;height:32px;border-radius:50%;border:2px solid #1a140e;background:#5a4128;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.6)}#mmmap:hover{background:#6e5032}
@media (max-width:520px){#mmwrap,#minimap{width:88px;height:88px}#mmmap{width:28px;height:28px}}
.mapctl{display:flex;gap:4px;margin-left:auto;margin-right:6px}.mapctl button{min-width:32px;height:30px;border-radius:6px;border:1px solid #000;background:#3a2c1e;color:#f1e4c4;font:700 14px var(--body);cursor:pointer;padding:0 8px}.mapctl button:hover{background:#4a3828}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;padding:0 12px 9px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid #000}
#zoom #qbtn{width:auto;padding:0 13px;border-radius:17px;font:700 14px var(--body)}
.ovhint{margin:8px 12px 0;font-size:12.5px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:4px}
#bankwin{height:min(540px,calc(100% - 24px))}
#bankwin .list{flex:1;align-content:start}
.stepper{display:inline-flex;gap:6px;align-items:center}
.btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.ovbar{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ovbar .lbl{color:var(--gold)}
.tabs button:disabled{opacity:.32;cursor:not-allowed}
.slot .pr{position:absolute;right:3px;bottom:1px;font-size:11px;font-weight:800;color:#f2e35a;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums}
#talk{top:auto;bottom:10px;transform:translateX(-50%);width:min(560px,calc(100% - 24px))}
.talkbody{margin:0;padding:10px 14px 8px;line-height:1.45;font-size:15px;overflow-y:auto;min-height:0;flex-shrink:1}
.opts{display:grid;gap:4px;padding:2px 10px 10px;overflow-y:auto;min-height:0;flex-shrink:2}
.opt{text-align:left;background:#241f1b;border:1px solid #3d342c;border-radius:4px;color:var(--sky);font:600 14px var(--body);padding:7px 10px;cursor:pointer}
.opt:hover,.opt:focus-visible{border-color:var(--gold);color:#fff}
.menu .o{color:#5fd8e0}
.stats .pn{color:var(--parch);font-weight:700}
#creator{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(10,8,6,.8);padding:16px;box-sizing:border-box;overflow-y:auto}
.crbox{width:min(460px,100%);box-sizing:border-box;background:var(--slab);border:2px solid var(--edge);border-radius:8px;padding:18px 18px 16px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.crbox h2{font-family:var(--display);font-weight:400;color:var(--gold);font-size:27px;margin:0 0 4px;text-wrap:balance}
.crbox .lead{color:var(--muted);margin:0 0 14px;font-size:14px;line-height:1.4}
.crgrid{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start}
#crprev{width:110px;height:140px;background:radial-gradient(circle at 50% 78%,#5a8a3a,#26391b 75%);border-radius:6px;border:1px solid var(--edge)}
.crf{display:grid;gap:6px;min-width:0}
.crf .lbl{margin-top:8px}
#crname{background:#1d1915;border:1px solid var(--edge);border-radius:4px;color:var(--parch);font:600 16px var(--body);padding:8px 10px;min-width:0}
#crname:focus{outline:2px solid var(--gold);outline-offset:-1px}
#crpron{display:flex;flex-wrap:wrap}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:36px;height:36px;border-radius:50%;border:2px solid #000;cursor:pointer;padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--gold)}
#crerr{color:#ff9a8a;min-height:1.2em;margin:10px 0 0}
.crnameset{font-size:18px;font-weight:700;color:var(--gold);padding:6px 0}
#crgo{width:100%;margin-top:6px;padding:10px;font-size:15px;background:#6b4f1d;border-color:var(--gold);color:#fff3d6}
@media (max-width:420px){.crgrid{grid-template-columns:1fr}#crprev{margin:0 auto}}
.spellhd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.spellhd b{color:var(--gold)}
.spells{display:grid;gap:4px}
.cost{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px}
.cost span{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cost img{width:16px;height:16px}
.cost .short{color:#ff9a8a}
#buffs{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.bf{font:700 11.5px var(--body);background:rgba(20,16,12,.82);border:1px solid #000;border-radius:3px;padding:2px 7px;color:#fff;display:flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums;text-shadow:1px 1px 0 #000}
.bf i{width:9px;height:9px;border-radius:50%;border:1px solid #000}
.bf.low{color:#ffb4a8}
#qtrack{margin-top:2px;max-width:200px;background:rgba(20,16,12,.85);border:1px solid #000;border-left:3px solid var(--gold);border-radius:3px;padding:4px 8px;font-size:12px;line-height:1.3;color:#fff;text-shadow:1px 1px 0 #000;text-align:left}
#qtrack b{display:block;font-family:var(--display);font-weight:400;font-size:13.5px;color:var(--gold)}
#quests.big{width:min(640px,calc(100vw - 24px));height:min(760px,calc(100vh - 24px));height:min(760px,calc(100dvh - 24px))}
.qcard{background:#241f1b;border:1px solid #3d342c;border-radius:5px;padding:12px 14px;display:grid;gap:6px}
.qhead{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.qhead .qn{flex:1;min-width:0;font-family:var(--display);font-size:21px;color:var(--gold)}
.qhead .chev{color:var(--muted);transition:transform .15s;font-size:14px}
.qhead[aria-expanded="true"] .chev{transform:rotate(90deg)}
.qcard .qsum{font-size:13px;color:var(--muted)}
#qlist{align-content:start}
.qcard h3{font-family:var(--display);font-weight:400;font-size:21px;color:var(--gold);margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.qchip{font:800 11px var(--body);letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:3px 7px;border:1px solid}
.qchip.todo{color:#ff9a8a;border-color:#7a3a32}.qchip.doing{color:#f2e35a;border-color:#7a6a2a}.qchip.done{color:#8fd16a;border-color:#3f6a2a}
.qmeta{font-size:12.5px;color:var(--muted)}
.qlog p{margin:6px 0;font-size:14.5px;line-height:1.45}
.qlog p.past{text-decoration:line-through;color:var(--muted)}
.qlog p.now{color:#fff}
.qrew{margin:4px 0 0;padding-left:18px;font-size:13.5px;color:var(--parch)}
#qdone{width:min(380px,calc(100% - 24px));text-align:center}
.qdbody{padding:18px 20px 16px;display:grid;gap:8px;justify-items:center}
.qdbody h2{font-size:26px!important}
.qdbody ul{list-style:none;padding:0;margin:4px 0 6px;display:grid;gap:3px;font-size:14px}
.qdbody li::before{content:"✦ ";color:var(--gold)}
#itip{position:fixed;z-index:70;max-width:240px;background:rgba(24,20,16,.97);border:1px solid var(--edge);border-radius:5px;padding:8px 10px;display:grid;gap:3px;font-size:12.5px;line-height:1.35;color:var(--muted);box-shadow:0 8px 20px rgba(0,0,0,.55);pointer-events:none}
#itip b{color:var(--gold);font-family:var(--display);font-weight:400;font-size:16px}
#itip span:first-of-type{color:var(--parch)}
.seg button#m-info[aria-pressed="true"]{color:var(--sky)}
.bar.low{animation:hpPulse .7s ease-in-out infinite alternate;border-color:#ff5a3c}
@keyframes hpPulse{from{box-shadow:0 0 0 0 rgba(255,70,40,0)}to{box-shadow:0 0 12px 3px rgba(255,70,40,.85)}}
@media (prefers-reduced-motion:reduce){.bar.low{animation:none;box-shadow:0 0 0 2px #ff5a3c}}
#chat.quiet .spam{display:none}
.toggle{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--parch);cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:#c9a03f}
.ghost{position:fixed;width:52px;height:52px;pointer-events:none;transform:translate(-50%,-50%);z-index:50;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.sect{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 2px 0}
.x{background:none;border:0;color:var(--parch);font-size:24px;cursor:pointer;line-height:1;padding:2px 8px}
.gear{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:220px;margin:0 auto 4px}
.ph{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:#77695a;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:760px){
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding-block:8px 10px;gap:8px}
  h1{font-size:23px}.sub{display:none}
  #panel{height:min(310px,40vh)}
  #chat{height:64px;font-size:13px}
  .bar{width:110px}
  #toast{font-size:20px}
}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}

/* online play: login, chat box */
#login{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(10,8,6,.85);padding:16px;box-sizing:border-box;overflow-y:auto}
#login .field{background:#1d1915;border:1px solid var(--edge);border-radius:4px;color:var(--parch);font:600 16px var(--body);padding:8px 10px;min-width:0}
#login .field:focus{outline:2px solid var(--gold);outline-offset:-1px}
#lgerr{color:#ff9a8a;min-height:1.2em;margin:10px 0 0}
.lgbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.lgbtns .btn{padding:10px;font-size:15px}
#lgin{background:#6b4f1d;border-color:var(--gold);color:#fff3d6}
#chatform{margin-top:4px}
#chattext{width:100%;box-sizing:border-box;background:var(--slab);border:2px solid var(--edge);border-radius:6px;color:var(--parch);font:14px var(--body);padding:6px 10px}
#chattext:focus{outline:2px solid var(--gold);outline-offset:-1px}
#chat .say b{color:var(--gold);font-weight:700}
#lgrefresh{width:100%;margin-top:8px;padding:10px;font-size:15px;background:#6b4f1d;border-color:var(--gold);color:#fff3d6}

/* ---------- playing with others: whispers, friends, look-ups and trading ---------- */
#chat .pm{color:#e8a0e8;cursor:pointer}#chat .pm b{color:#f0b8f0}
#chat .treq{color:#e8a0e8;cursor:pointer;text-decoration:underline}#chat .treq.done{text-decoration:none;cursor:default;opacity:.7}
#chatform{display:flex;gap:6px}
#chatto{flex:none;background:#3a2440;border:2px solid #7a4f86;border-radius:6px;color:#f0c8f0;font:600 13px var(--body);padding:0 10px;cursor:pointer;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
#hover .p,#menu .p{color:#f0e6a0}
.frform{display:flex;gap:6px;margin:4px 0 10px}.frform .field{flex:1;min-width:0;background:#1d1915;border:1px solid var(--edge);border-radius:4px;color:var(--parch);font:600 14px var(--body);padding:6px 8px}
.fr{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#241f1b;border:1px solid #3d342c;border-radius:4px;margin-top:5px}
.fr i{width:9px;height:9px;border-radius:50%;background:#6a5d4c;flex:none}.fr.on i{background:#8fd16a}
.fr .nm{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fr:not(.on) .nm{color:var(--muted)}
.fr .btn{padding:4px 8px;font-size:12px}
#pane-friends>.lbl{display:block;margin-top:8px}#frlist>.lbl{display:block;margin-bottom:2px}
.instop{font-size:14px;color:var(--muted);margin-bottom:6px}.instop b{color:var(--gold)}
#insskills{grid-template-columns:1fr 1fr 1fr}
.trrow{display:flex;align-items:center;gap:8px;padding:3px 2px;font-size:14px}.trrow img{width:28px;height:28px}
#tradewin{width:min(460px,calc(100% - 24px))}
.trcols{grid-template-columns:1fr 1fr;align-items:start;gap:10px!important}
.trcols section{display:grid;gap:6px;align-content:start;min-width:0}
.trcols .bgrid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
.trlist{display:grid;gap:2px}
.trworth{font-size:12px;color:var(--muted)}
.trstatus{margin:0;padding:0 12px 6px;font-size:13.5px;min-height:1.2em;color:var(--muted)}.trstatus.ok{color:#8fd16a}.trstatus.warn{color:#ff9a8a;font-weight:700}