@font-face{font-family:HMK;src:url('/art/regular.woff')}@font-face{font-family:HMK;src:url('/art/bold.woff');font-weight:700}@font-face{font-family:HSerif;src:url('/art/serif.woff')}
:root{color-scheme:dark;--gold:#f1d49c;--muted:#b4c7bd;--line:#b5bc9855;--ink:#f7eee0;--soft:#2c4543;--dark:#132624;--red:#853c39}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#101a1c;color:var(--ink);font:14px/1.48 HMK,system-ui,sans-serif;min-height:100dvh;display:grid;place-items:center}#app{width:min(100vw,calc((100dvh - 49px) * 16 / 9),1720px);min-width:680px;padding:0}#stage{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;background:#aabdaf;overflow:hidden;border:1px solid #819186;box-shadow:0 0 50px #000a}
#world{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;cursor:crosshair;touch-action:none}#title-mark{position:absolute;pointer-events:none;top:1%;left:50%;transform:translateX(-50%);width:clamp(139px,18%,250px);z-index:3;text-align:center}.network{background:#102625e5;position:absolute;top:2%;right:1.3%;padding:6px 8px;border:1px solid var(--line);border-radius:4px;font-size:11px;z-index:4}.light{width:7px;height:7px;margin-right:5px;display:inline-block;background:#9fd9a9;border-radius:50%}.network.off .light{background:#e99175}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse,#17292544,#0d1e1dc4);padding-top:40px}
.auth{width:min(395px,55%);overflow:auto;max-height:78%;padding:20px 23px;background:linear-gradient(170deg,#223a39f5,#132726fa);border:1px solid #d7c493a0;border-radius:10px;box-shadow:0 12px 33px #09121099}.auth h1{font:clamp(24px,3.1vw,38px)/1 HSerif,Georgia,serif;color:var(--gold);margin:0 0 8px}.auth p{margin:0 0 10px;font-size:12px;color:#d9e4d8}.auth label{margin-bottom:7px}.auth input{padding:6px 8px}fieldset{border:1px solid var(--line);padding:6px;display:grid;grid-template-columns:repeat(3,1fr);margin:4px 0 10px;gap:6px;border-radius:5px}fieldset legend{color:var(--gold);font-size:10px}fieldset label{margin:0!important;font-size:11px;text-align:center;background:#203835;padding:4px;border-radius:5px;cursor:pointer}fieldset img{width:100%;height:clamp(23px,7vh,53px);object-fit:contain}fieldset input{width:auto;justify-self:center}
input,select,textarea,button{font:inherit}label{display:grid;gap:4px;color:#e5e8d5;font-size:12px;font-weight:700}input,select,textarea{width:100%;background:#162c2b;border:1px solid var(--line);border-radius:5px;color:var(--ink);padding:7px 8px;min-width:0}button,.button{border:1px solid #d9bb80;background:#e3c48d;color:#292721;text-decoration:none;border-radius:5px;padding:7px 10px;cursor:pointer;font-weight:700}button:hover,.button:hover{filter:brightness(1.11)}button:disabled{cursor:default;opacity:.45}.line{border-color:var(--line);background:#203634;color:#efe4c7}.actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.small{font-size:11px;color:var(--muted)}form{margin:0}
#message,#notice{position:absolute;z-index:8;left:50%;transform:translateX(-50%);border-radius:5px;text-align:center;max-width:76%;padding:7px 13px;background:#203e38;border:1px solid #b6d9a588;font-weight:700;font-size:13px;box-shadow:0 6px 18px #0005;pointer-events:none}
#message{bottom:10%}#message.error{background:#6e3330;border-color:#d9a581}#notice{top:14%;background:#713b27;border-color:#e2ab70;color:#fff2cf;white-space:normal;min-width:220px}
#hud{position:absolute;top:2%;left:1.3%;min-width:134px;width:18%;padding:8px 10px;background:#142929e8;border:1px solid var(--line);border-radius:6px;z-index:1;box-shadow:0 5px 16px #0005}.meter{height:14px;position:relative;margin:3px 0;background:#091b1e;border-radius:3px;overflow:hidden}.meter i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#733e38,#ad6756);transition:width .18s}.meter b{position:relative;display:block;text-align:center;color:white;font-size:9px}.meter.mp i{background:linear-gradient(90deg,#435d8b,#749dbd)}.meter.xp{height:9px}.meter.xp i{background:linear-gradient(90deg,#907041,#dab85c)}.meter.xp b{font-size:7px}#level{float:right;color:var(--gold);font-size:11px}#location,#fortune{font-size:11px;margin:4px 0 0;color:#dde9db}#fortune{color:var(--gold);display:flex;align-items:center;gap:5px}#fortune img{width:16px;height:16px;object-fit:contain}
#feed{position:absolute;left:1.3%;bottom:10%;max-width:40%;font-size:11px;color:#e8eddd;pointer-events:none;text-shadow:0 1px 4px #000,0 0 6px #000}#feed p{margin:1px 0;background:#112220c1;padding:2px 6px;border-radius:3px;width:max-content;max-width:100%}#ribbon{position:absolute;bottom:0;left:0;right:0;background:#142a28f2;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:5px 3px;z-index:4}#ribbon button{font-size:clamp(10px,1vw,13px);min-height:28px;padding:4px 7px;background:#263f38;color:#ede7c7;border-color:#89967555}#ribbon button.combat{background:#63452c;color:#ffedcc}kbd{border-radius:3px;padding:1px 3px;background:#0005;color:#edd39a;font:10px ui-monospace,monospace}
.side{position:absolute;right:1.3%;top:13%;bottom:8.8%;width:min(385px,44%);z-index:6;display:grid;grid-template-rows:auto minmax(0,1fr);background:#142b28f8;border:1px solid #c5b79199;border-radius:7px;box-shadow:0 10px 24px #0008}.side header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:8px 10px}.side h2{font:24px/1 HSerif,Georgia,serif;color:var(--gold);margin:0}.side p{margin:0 0 8px}.side h3{font-size:13px;color:var(--gold);margin:10px 0 5px}.side-content p{font-size:12px}#side-content{overflow:auto;padding:10px 12px;font-size:12px}.item-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;padding:6px 0;border-bottom:1px solid #b5bc982f}.item-row small{display:block;color:#baccbb}.item-row form{display:flex;gap:3px}.item-row form input{width:48px}.item-row button{min-height:24px;font-size:11px;padding:4px 6px;white-space:nowrap}.down{z-index:6;position:absolute;inset:35% 32% auto;display:grid;text-align:center;background:#29322d;border:1px solid #c9a578;padding:14px;border-radius:8px;color:#ffe1a9}.down p{margin:0 0 8px;font-weight:700}
footer{font-size:11px;padding:7px 3px;display:flex;align-items:center;justify-content:space-between;gap:7px;color:#a9baaf}footer button{padding:4px 6px;font-size:11px}#stage:fullscreen{width:100%;height:100%;max-width:none}body:has(#stage:fullscreen){background:#000}
/* PC controls */
#title-mark{width:clamp(108px,14%,200px);top:.9%;filter:drop-shadow(0 3px 8px #0c15199c)}
#title-mark img{width:100%;height:auto;display:block}
#stage{background:#34473a}
.top-controls{position:absolute;top:2%;right:1.3%;z-index:5;display:flex;align-items:center;gap:6px}
.top-controls .network{position:static;padding:6px 8px;border-color:#b4bd9880;color:#eee5bf;background:#172b2bd9;box-shadow:0 4px 11px #0004}
.status-chip{font-size:11px;padding:6px 8px;background:#172b2bd9;border:1px solid #b4bd9880;color:#eee5bf;font-weight:700}
.icon-button{position:relative;display:inline-grid;place-items:center;line-height:0;width:clamp(27px,3.45vw,49px);height:clamp(28px,3.45vw,49px);padding:4px;background:linear-gradient(145deg,#37433ae6,#172926fa);border:1px solid #938260;border-radius:6px;color:#f9e6b1;box-shadow:0 2px 7px #15241aaa}
.icon-button:focus-visible,.icon-button:hover{outline:1px solid #ebcc94;outline-offset:1px}
.icon-button img{z-index:1;display:block;max-width:100%;width:100%;height:100%;object-fit:contain;pointer-events:none}
.icon-button kbd{position:absolute;bottom:0;left:1px;line-height:1;z-index:2;font-size:9px;padding:2px;background:#192726df;color:#f9e6b1}
.icon-button .quantity{position:absolute;right:2px;top:2px;z-index:2;font-size:11px;line-height:1;color:#fff2bd;text-shadow:0 1px 3px #081a12}
.icon-button .cooldown{position:absolute;inset:auto 0 0;z-index:2;text-align:right;color:#f4e6bd;background:#122321b3;font-size:9px;line-height:13px}
.icon-button .cooldown:empty,.icon-button .quantity:empty{display:none}
.top-controls .icon-button{width:32px;height:31px;padding:2px}
#ribbon{align-items:center;gap:20px;background:linear-gradient(180deg,transparent,#111f1cd6 48%,#112522f2);padding:12px 8px 5px;border-top:0;z-index:4}
#ribbon .dock-group{display:flex;align-items:center;gap:4px}
#ribbon .dock-tools .icon-button{width:clamp(25px,3vw,41px);height:clamp(25px,3vw,41px);padding:4px;background:#1d332bad;color:#efe4c7}
#ribbon .dock-combat .icon-button{padding:4px;background:linear-gradient(155deg,#5b4934,#332b26);border-color:#a07b53}
#ribbon .dock-combat .quick{background:linear-gradient(155deg,#344339,#1b2a22);border-color:#7b8865}
#ribbon .icon-button.on{border-color:#cee7ad;box-shadow:inset 0 0 0 2px #9eca886a,0 0 10px #cfeea56c}
#ribbon .icon-button [hidden]{display:none}
#minimap{max-width:100%;height:auto;display:block}
.mini{position:absolute;z-index:2;top:8%;right:1.35%;width:clamp(102px,13.8%,186px);border:1px solid #c9ba8d83;border-radius:6px;background:#1d302be7;padding:4px;box-shadow:0 3px 10px #0f20195f}
.side{bottom:9.5%;top:19%;width:min(390px,47%);overflow:hidden}
#side-content h3{color:#f3d99c}
.item-icon{display:inline-grid;width:25px;height:25px;place-items:center;margin-right:6px;vertical-align:middle;border:1px solid #b5a3765e;border-radius:5px;background:#233832}
.item-icon img{max-width:23px;max-height:23px}
.item-pick{position:sticky;top:0;z-index:2;background:#152d2a;padding:4px 0 8px;display:grid;grid-template-columns:1fr 96px;gap:4px}
.item-row div>small{margin-top:2px}
.quick-assign{margin-left:5px;max-width:71px;padding:4px}
#feed{bottom:13%;max-width:36%;opacity:.95}
.meter.xp i{background:linear-gradient(90deg,#2f947c,#8beecf)}
#message{bottom:14%}
footer{padding:5px 3px}
.footer-link{padding:4px 6px;color:#e9e7cd;background:none;border:0;box-shadow:none;font-size:11px;text-decoration:underline;text-underline-offset:3px}
#settings{background:#1c302d;color:var(--ink);border:1px solid #cab89588;border-radius:11px;padding:0;width:min(645px,92vw);max-height:83vh;box-shadow:0 21px 54px #081817b0}
#settings::backdrop{background:#111c1cc1}
#entry-notice{
  color:var(--ink);background:#213b34;border:1px solid #d9b775;border-radius:14px;
  padding:0;width:min(780px,calc(100vw - 36px));max-height:88vh;
  box-shadow:0 22px 85px #081817df;overflow:auto
}
#entry-notice::backdrop{background:#0a1819bd;backdrop-filter:blur(4px)}
.entry-notice-head{
  padding:clamp(18px,4vw,40px) clamp(22px,5vw,52px);background:linear-gradient(108deg,#1a3029dd,#172b22b0),url(/art/folio-quest.webp) center/cover;
  border-bottom:1px solid #d8b67f80
}
#entry-notice h2{margin:0;color:#ffe6a4;font:clamp(26px,5vw,48px)/1.12 HSerif,Georgia,serif;overflow-wrap:anywhere}
#entry-notice-body{
  padding:clamp(22px,4vw,42px) clamp(22px,5vw,52px);min-height:min(180px,24vh);
  white-space:pre-wrap;overflow-wrap:anywhere;font-size:clamp(15px,2vw,19px);line-height:1.65;color:#fff0d3
}
#entry-notice footer{padding:0 clamp(22px,5vw,52px) 26px;display:flex;justify-content:flex-end}
#entry-continue{padding:10px 23px;min-width:118px}
.npc-race-board label{display:grid;gap:6px;margin:8px 0;color:#f8dca2}
.npc-race-scroll{max-height:min(310px,37vh);overflow:auto;margin:10px 0}
.npc-race-board table{border-collapse:collapse;width:100%;font-size:12px}
.npc-race-board th,.npc-race-board td{padding:8px 6px;text-align:left;border-bottom:1px solid #d4bd8b40}
.npc-race-board th{position:sticky;top:0;background:#30483c;color:#ffe6a4}
.settings-shell{padding:15px 20px 16px}
.settings-shell>header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line)}
.settings-shell header small{color:#b7c4a3;letter-spacing:.07em;font-size:10px;font-weight:700}
.settings-shell h2{font:33px/1.08 HSerif,Georgia,serif;color:#f1d49c;margin:3px 0}
#setting-tabs{display:flex;gap:6px;margin:11px 0}
#setting-tabs button{background:#283e36;color:#ede7cb;border-color:#627567;min-height:34px}
#setting-tabs button.active{background:#e3c48d;color:#292721;border-color:#e3c48d}
#settings-content label{margin-bottom:8px}
#settings-content .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
#settings-content .wide{grid-column:1/-1}
#settings-content .check{display:flex;align-items:center;gap:7px}
#settings-content .check input{width:auto}
#settings-content input[type=range]{padding:0;accent-color:#dcb87e}

#npc-walk{position:absolute;z-index:5;left:50%;bottom:15%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:82%;background:#172924f5;border:1px solid #d6af76b8;box-shadow:0 5px 18px #17120eb0,inset 0 0 12px #b68b3b30;border-radius:24px;padding:5px 13px 5px 7px;color:#f9e8b8;font-size:12px;font-weight:700;text-align:center;pointer-events:none}
#npc-walk img{width:25px;height:25px;object-fit:contain}
.side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]){top:12%;bottom:10%;width:min(502px,55%);border:1px solid #b79762;border-radius:11px;background:linear-gradient(143deg,#243533,#182b28 65%,#122420);box-shadow:0 14px 50px #11120ecf,inset 0 0 0 2px #0d251a,inset 0 0 0 3px #d8b27440}
.side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]) header{min-height:46px;padding:7px 13px;background:linear-gradient(110deg,#27403b,#233530 58%,#3d392b);border-bottom-color:#c39f5c74}
.side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]) h2{font-size:clamp(18px,2.6vw,27px);color:#ffe6ad}
.side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]) #side-content{padding:10px 13px 13px;scrollbar-width:thin;scrollbar-color:#947d58 #17302b}
.side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]) #side-close{padding:2px 9px;color:#f7dfad;font-size:19px}
.folio-cover{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:11px;min-height:81px;padding:12px;border-radius:8px;border:1px solid #b49b647f;margin:0 0 10px;background-image:linear-gradient(90deg,#142823 10%,#172823f7 35%,#14282228 100%),var(--cover);background-position:center,right center;background-size:cover,cover}
.quest-cover{--cover:url('/art/folio-quest.webp')}
.shop-cover{--cover:url('/art/folio-shop.webp');background-image:linear-gradient(90deg,#211f17 8%,#26291be9 42%,#2926162c 100%),var(--cover)}
.folio-cover > img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 1px 5px #090b08)}
.folio-cover strong{display:block;font:clamp(15px,2vw,23px)/1.1 HSerif,Georgia,serif;color:#ffebbb;text-shadow:0 2px 4px #0b1c16;margin-bottom:5px}
.side .folio-cover p{margin:0;color:#efdeba;text-shadow:0 1px 3px #0b1c16;font-size:11px}
.folio-tabs{display:flex;gap:3px;min-width:0}
.folio-tabs button{border-color:#7c8c749b;background:#1d332d;color:#e1dfc6;font-size:11px;white-space:nowrap;padding:4px 8px;min-height:27px}
.folio-tabs button[aria-pressed=true]{background:linear-gradient(#e9d69f,#ba975e);color:#251e15;border-color:#e3c488;box-shadow:0 2px 7px #0b120e80}
.npc-tabs{margin-bottom:9px;flex-wrap:wrap}
.npc-description{border-inline-start:2px solid #c8a76c;padding:7px 10px;color:#e4ead6;background:#30403788}
.shop-tools{display:flex;align-items:center;gap:8px;margin:0 0 9px}
.shop-tools input{min-height:28px;padding:3px 7px;border-color:#8f825f;font-size:11px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr));gap:8px}
.shop-card,.quest-card{padding:8px 10px;border-radius:7px;border:1px solid #a7936178;background:linear-gradient(140deg,#343c30,#20362f 55%,#21302a);box-shadow:inset 0 0 0 1px #0c261970}
.quest-card{margin-bottom:8px;box-shadow:inset 2px 0 var(--edge,#99885887),inset 0 0 0 1px #0c261970}
.quest-card.active{--edge:#75b1a0}.quest-card.ready{--edge:#f3c77e}.quest-card.done{--edge:#89bb86}.quest-card.focused{border-color:#ffe4a2}
.shop-product,.quest-title,.quest-goal{display:flex;align-items:center;gap:7px}.shop-product{min-height:38px}
.shop-product h3,.quest-title h3{font:clamp(12px,1.9vw,17px)/1.2 HSerif,Georgia,serif;color:#ffedca!important;margin:0 0 3px}
.shop-product p,.quest-title p{color:#c8d6c2;margin:0;font-size:10px}
.shop-product .item-icon{float:none;display:inline-grid;place-items:center;margin:0;flex:0 0 auto;width:34px;height:34px;background:#d7a45d17;border-radius:7px;border:1px solid #c4aa6b7a}
.shop-card .shop-product .item-icon img{width:29px;height:29px}
.shop-price{display:flex;align-items:center;gap:4px;color:#f8cf83;font-weight:700;margin:4px 0 6px;min-height:16px;font-size:11px}
.shop-price small{color:#c5ba97;font-weight:400}
.shop-card form{display:grid;grid-template-columns:49px minmax(0,1fr);gap:5px}
.shop-card input,.shop-card button,.quest-action button{min-height:26px;padding:3px 6px;font-size:11px}
.plan-card button{width:100%}
.quest-title{justify-content:space-between;align-items:flex-start}
.quest-status{border-radius:10px;border:1px solid #a69c72aa;background:#23382f;color:#efe2b7;flex:0 0 auto;font-size:9.5px;line-height:1.3;padding:3px 5px;text-align:center}
.ready .quest-status,.done .quest-status{color:#ffe8ad;border-color:#cbaa61}
.quest-goal{justify-content:space-between;margin:8px 0 3px;color:#dbe7d2;font-size:11px}
.quest-goal b{color:#c4ead6;font-variant-numeric:tabular-nums}
.quest-card progress{appearance:none;width:100%;display:block;height:4px;border:none;border-radius:4px;background:#092921;overflow:hidden;margin-bottom:8px;accent-color:#8dd3a0}
.quest-card progress::-webkit-progress-bar{background:#112822}.quest-card progress::-webkit-progress-value{background:linear-gradient(90deg,#458e79,#cbe59c)}
.quest-rewards{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.quest-rewards > span{display:flex;align-items:center;gap:3px;background:#122e26;color:#edf2db;border:1px solid #cfbe894a;border-radius:5px;padding:3px 5px;font-size:10px}
.quest-rewards > .reward-exp{color:#aceabe}.quest-rewards > .reward-auri{color:#ffda97}
.quest-rewards .item-icon,.shop-price .item-icon{float:none;width:15px;height:15px;display:grid;place-items:center;margin:0}
.quest-rewards .item-icon img,.shop-price .item-icon img{width:15px;height:15px}
.quest-action{display:flex;justify-content:flex-end;align-items:center;margin-top:6px}
.folio-hint,.folio-empty{color:#d6dfc2;font-size:11px}.box-preview{margin-bottom:2px}
.side #side-content .folio-heading{margin:12px 0 6px}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e2cc94;outline-offset:2px}
@media(max-width:660px){
  .side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]){width:min(480px,70%)}
  .side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]) #side-content{padding:7px 8px}
  .folio-cover{min-height:57px;padding:6px 8px}.folio-cover > img{width:28px;height:28px}
}
#settings-content .settings-group{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
#settings-content .key-list{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 10px}
.key-row{display:flex;justify-content:space-between;gap:5px;align-items:center;padding:3px 5px;border-radius:3px;background:#ffffff06;font-size:12px}
.key-row button{min-width:69px;font-size:11px;padding:4px 6px;background:#283e36;border-color:#7e8d70;color:#eee7d0}
.key-row button.waiting{border-color:#e3c48d;color:#f3d69b}
#settings-message{min-height:16px;margin:8px 0 0;color:#efd298;font-size:11px}
#settings-content progress{width:100%;height:7px;accent-color:#c4bd82;margin:5px 0}
#stage:fullscreen canvas#world{object-fit:contain}
body:has(#stage:fullscreen) #app{max-width:none}
@media(max-width:850px){#ribbon{gap:6px}.dock-group{gap:2px!important}#ribbon .icon-button{padding:3px!important}.top-controls{gap:3px}#settings-content .form-grid{gap:5px 7px}}

#title-mark{display:flex;align-items:center;justify-content:center;gap:4px;width:clamp(134px,16%,225px)}
#title-mark .brand-emblem{width:clamp(31px,3.2vw,48px);height:auto;flex:0 0 auto}
#title-mark .brand-word{width:calc(100% - 48px);min-width:0}
#ribbon{left:50%;right:auto;bottom:1.2%;transform:translateX(-50%);padding:5px 6px;border:1px solid #a7915a8a;border-radius:11px;background:linear-gradient(165deg,#302d23eb,#191f1aef);box-shadow:0 4px 15px #0b2119a8;width:max-content}
#tool-cluster{position:absolute;left:1.35%;top:25%;z-index:5;display:flex;align-items:flex-start;gap:6px;width:max-content;pointer-events:none}
#tool-dock{pointer-events:auto;padding:5px;background:linear-gradient(155deg,#22362bdf,#162820e6);border:1px solid #a68e6485;border-radius:8px;box-shadow:0 4px 14px #091a15a0}
#tool-dock .dock-tools{display:grid;grid-template-columns:repeat(3,auto);gap:4px}
#tool-dock .icon-button{width:clamp(25px,2.25vw,35px);height:clamp(25px,2.25vw,35px);padding:4px}
#tool-dock .icon-button.on{border-color:#d8d197;box-shadow:inset 0 0 0 1px #e7cc8db5}
#tool-dock .icon-button kbd{display:none}
#map-stack{position:absolute;z-index:3;top:9%;right:1.35%;width:clamp(129px,17.1%,236px);display:grid;gap:5px}
#map-stack .mini{position:static;width:100%;padding:4px;background:#162b24ee}
#minimap{width:100%;max-height:85px;object-fit:contain}
#stage:fullscreen #world{object-fit:contain}
#quest-watch{border:1px solid #a58d608a;border-radius:7px;background:#132a22ef;box-shadow:0 4px 12px #0819116a;min-height:0;overflow:hidden}
.watch-head{width:100%;display:flex;align-items:center;gap:5px;padding:3px 7px;border:0;border-bottom:1px solid #b6a27755;border-radius:0;background:#334234;color:#ffdf9e;font-size:11px;text-align:left}
.watch-head img{width:20px;height:20px;object-fit:contain}.watch-head span{flex:1}.watch-head kbd{font-size:9px;color:#d9cb9a}
#quest-watch-lines{display:grid;max-height:clamp(56px,16vh,140px);overflow:auto;scrollbar-width:thin;scrollbar-color:#95865d #1a2d24}
.watch-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 4px;text-align:left;color:#edebd4;padding:4px 6px;border:0;border-bottom:1px solid #c8c49b2e;background:transparent;border-radius:0;font-size:10px}
.watch-line b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.watch-line em{font-style:normal;color:#b9dd9f}.watch-line small{grid-column:1/-1;font-size:9px;font-weight:400;color:#c4d1b9;line-height:1.25}
.watch-line.ready em{color:#ffe7a0}.watch-empty{margin:0;padding:5px 7px;font-size:10px;color:#dbe3c8}
#boss-board{overflow:hidden;border:1px solid #bd775888;border-radius:7px;background:#2b281eef;box-shadow:0 3px 11px #100d08ab}
.boss-head{display:flex;align-items:center;background:#523528;color:#ffd3aa}
#boss-lines{display:grid;max-height:clamp(83px,23vh,164px);overflow:auto;scrollbar-width:thin;scrollbar-color:#9d7755 #29231b}
.boss-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 5px;border-bottom:1px solid #b7a17c34;padding:3px 6px;color:#ffe7c4;font-size:9.5px}
.boss-row:last-child{border-bottom:0}.boss-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boss-row time{color:#f9b781;font-variant-numeric:tabular-nums}
.boss-row span{grid-column:1/-1;color:#dccdb4;font-size:8.5px;line-height:1.25}.boss-row.active{background:#7a3b2d64}.boss-row.active time{color:#ffdd88}
.side,.side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]){left:calc(1.35% + clamp(90px,7.9vw,125px));right:auto;top:15%;bottom:10%;width:min(504px,46%)}
#feed{left:1.4%;bottom:8%;max-width:24%;font-size:10px}
#npc-walk{bottom:13%}.forge-grid{display:grid;gap:7px}.forge-piece{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;min-height:52px;border:1px solid #9e86586e;border-radius:6px;background:linear-gradient(140deg,#354338,#283a31);padding:7px}
.forge-piece small{display:block;color:#d8dec4}.forge-piece button{font-size:10px;padding:5px 6px}.forge-piece .piece-name{color:#ffe3aa;font-weight:700}
@media(max-width:810px){
 #tool-dock{padding:3px}
 #tool-dock .icon-button{padding:3px}
 #tool-dock .dock-tools{gap:3px}
 .side,.side:is([data-kind=npc],[data-kind=quests],[data-kind=plans]){width:52%;left:106px;top:13%}
 #feed{display:none}
}
/* Round portrait and rounded gauges */
#hud{width:clamp(214px,24%,308px);min-width:190px;background:linear-gradient(137deg,#243b35ea,#102825e8);border:1px solid #b3a37d8f;padding:8px 10px;box-shadow:0 4px 18px #0c1e18a6}
.vitals{display:grid;grid-template-columns:clamp(44px,6.3vw,80px) minmax(0,1fr);gap:9px;align-items:center}
.avatar-medallion{position:relative;margin:0;aspect-ratio:1;width:100%;border:1px solid #f0c986;border-radius:50%;isolation:isolate;padding:4px;background:conic-gradient(from 40deg,#b49047,#684635,#f5d493,#7d5a39,#e6b96a,#8f6a39,#e7cb82,#b49047);box-shadow:0 0 0 2px #172a22,0 0 12px #ce9b5480;line-height:1}
.avatar-medallion img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:1px solid #331e18}
.avatar-medallion img:not([src]){visibility:hidden}
#level{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);float:none;min-width:39px;font-size:10px;line-height:13px;color:#fff0b4;background:#3f4430;border:1px solid #cfaa63;border-radius:20px;padding:1px 4px;white-space:nowrap}
#player-name{font-size:12px;display:inline}
#class-mark{font-size:9px;color:#c6d9b9;display:block;margin:0 0 3px}
#hud.poison .meter.hp i{background:linear-gradient(90deg,#628237,#a4bb68)}
#hud .meter{border-radius:20px;height:15px;border:1px solid #e1bf8679;background:#101d1df2;margin:2px 0;box-shadow:inset 0 1px 3px #0814138e}
#hud .hp i{background:linear-gradient(0deg,#8d322d,#c75544 70%,#ed8f77)}
#hud .mp i{background:linear-gradient(0deg,#305b9b,#4888c9 70%,#8ecbe7)}
#hud .xp{height:8px}
#hud .xp b{font-size:6px}
#hud .meter i{border-radius:20px;box-shadow:inset 0 1px 0 #fff7cf44}
#hud .meter b{font-size:9px;line-height:12px}
#hud .xp b{line-height:6px}
#location,#fortune{display:inline-flex;gap:5px;font-size:10px;margin-top:6px}
#fortune{float:right}
.dragon-flare,.ember-ring{isolation:isolate;overflow:hidden}
.dragon-flare::before,.ember-ring::before{content:"";position:absolute;inset:-27%;z-index:-2;background:conic-gradient(transparent 0deg 200deg,#a2382830 225deg,#f76736 259deg,#fbd979 284deg,#fff1b2 299deg,#ff955e 315deg,transparent 336deg);animation:flame-ring 2.65s linear infinite}
.dragon-flare::after,.ember-ring::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:4px;background:radial-gradient(ellipse at 50% 110%,#7e3a22,#27372c 78%);box-shadow:0 0 4px #431c1930}
.ember-ring::before{animation-duration:4.1s;opacity:.67}.ember-ring.quiet::before{opacity:.46}
@keyframes flame-ring{to{transform:rotate(360deg)}}
.steady .dragon-flare::before,.steady .ember-ring::before{animation:none;background:#d9b887;opacity:.35}

.auth .auth-warning{color:#fff0d2;background:#642d2a;border:1px solid #d6a574;border-radius:5px;padding:8px 10px}

/* Fill the resizable app window and keep the scene's proportions. */
html,body{width:100%;height:100%;min-height:0;overflow:hidden}
body{display:block}
#app,#stage{width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0}
#stage{aspect-ratio:auto;border:0;border-radius:0}
#stage #world,#stage:fullscreen #world,#stage:fullscreen canvas#world{object-fit:cover;object-position:50% 80%}
#view-controls{position:absolute;right:10px;bottom:9px;z-index:7;display:flex;align-items:center;gap:5px}
#view-controls button{padding:5px 7px;font-size:10px;background:#20352ed9;border-color:#caba886e}
#fullscreen span:first-child{font-size:14px;color:#e8d09a;margin-right:3px}
.auth{max-height:90%;width:min(392px,74%);padding:14px 20px}
.auth .plain-action{padding:6px 0 0;background:none;border:0;text-decoration:underline;color:#f2d9ae}
.auth-code{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px}
.auth-code button{margin-top:17px;min-height:33px}
#boss-board{position:relative;top:var(--boss-shift,0px);width:clamp(154px,15vw,183px);pointer-events:auto}
#boss-board.is-collapsed{width:max-content}
#boss-board.has-active{border-color:#dfa366}
#boss-grip{cursor:ns-resize!important;touch-action:none;padding:2px 4px 2px 5px;font-size:13px;color:#d9aa77;user-select:none}
#boss-toggle{display:flex;flex:1;align-items:center;justify-content:space-between;gap:8px;min-height:24px;padding:3px 7px 3px 1px;border:0;border-radius:0;background:none;color:#ffdfb2;font-size:10.5px;white-space:nowrap}
.boss-chevron{width:5px;height:5px;margin-right:2px;border-bottom:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(225deg)}
.is-collapsed .boss-chevron{transform:rotate(45deg)}
#boss-lines{max-height:min(117px,22vh);overflow:auto}
.boss-row{font-size:9px;padding:3px 5px}
.boss-row span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#chat-dock{position:absolute;left:1.35%;bottom:1.6%;width:min(31%,375px);min-width:178px;z-index:5;background:#162b22ec;border:1px solid #bcac785e;border-radius:6px;padding:4px}
#chat-dock-lines{overflow:auto;max-height:clamp(31px,12vh,86px);font-size:10px;scrollbar-width:thin;min-height:16px;overflow-wrap:anywhere}
#chat-dock-lines p{margin:1px 3px;color:#e5eae0}
.chat-tag{color:#addec7;font-size:8px}
.chat-tag.server{color:#f1ca89}
#chat-dock-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px}
#chat-dock-form input,#chat-dock-form select,#chat-dock-form button{font-size:10px;padding:2px 4px;min-height:23px}
.chat-visible #feed{bottom:24%;max-width:29%}
#chat-visibility[aria-pressed=false]{opacity:.58}
.trade-peer{padding:6px 10px;background:#1e3932;border:1px solid #a88f5b66;border-radius:7px}
.trade-peer ul{padding-left:16px;margin:3px 0}
.trade-item{display:grid;grid-template-columns:minmax(0,1fr) 55px 29px;gap:4px;margin:4px 0}
.trade-item input,.trade-item select{padding:4px}
.mail-row{padding:6px 2px;border-bottom:1px solid #a7925d55}
.mail-row small{display:block;color:#c1cbb2}
.mail-row p{margin:4px 0;overflow-wrap:anywhere}
@media(max-height:480px){#tool-cluster{top:27%}#tool-dock{padding:3px}#tool-dock .dock-tools{gap:2px}#tool-dock .icon-button{width:24px;height:24px}.top-controls #net{font-size:9px}#fullscreen-label{display:none}}
.potion-grid{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:5px 6px;margin:6px 0}
#auto-config{margin-bottom:9px}