:root{color-scheme:dark;--ink:#eaf5ed;--muted:#b8c7c5;--gold:#edd1a0;--jade:#7fcfb7;--panel:rgba(13,35,40,.88);font-family:Tahoma,system-ui,sans-serif;color:var(--ink);font-size:16px}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#112b32}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}#world{position:fixed;width:100%;height:100%;display:block;touch-action:none}#vignette{pointer-events:none;position:fixed;inset:0;box-shadow:inset 0 0 160px #06182066}.panel{background:var(--panel);border:1px solid #bcd9c537;box-shadow:0 14px 50px #00161e33;backdrop-filter:blur(16px);border-radius:8px}.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--gold)}#loading{position:fixed;inset:0;display:grid;place-items:center;background:#102c32;z-index:50}#gate{position:fixed;inset:0;background:linear-gradient(90deg,#09202830 15%,#09202820 40%,#092028b0 100%)}.brand{position:absolute;left:7vw;top:15vh;text-align:center;text-shadow:0 3px 30px #082b33}.brand h1{font-family:Georgia,serif;font-size:clamp(54px,7vw,108px);font-weight:400;letter-spacing:.1em;margin:12px 0 0;color:#fff2d2}.brand p{font-size:17px;color:#e4ece4;letter-spacing:.05em}.brandline{display:flex;gap:24px;align-items:center;justify-content:center;color:var(--gold);font-size:15px}.brandline i{width:70px;height:1px;background:#dac29480}.entry{width:390px;position:absolute;right:6vw;top:50%;transform:translateY(-50%);padding:28px;background:#102e35df}.entry-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);align-items:center}.tag{border:1px solid #8fccaa55;border-radius:20px;padding:4px 9px;color:var(--jade)}h2{font-size:23px;font-weight:500;margin:20px 0 8px}.muted{color:var(--muted);font-size:14px;line-height:1.7}label{display:block;font-size:14px;margin-top:14px;color:#d6e2dc}input,select{width:100%;display:block;margin-top:7px;background:#061e2766;border:1px solid #b4cdbc44;border-radius:4px;padding:10px 12px;color:white;min-height:42px}select option{background:#15343a}.pair{display:flex;gap:12px}.pair label{flex:1}.primary{background:linear-gradient(110deg,#e4c48c,#f3d9ab);border:1px solid #fff0c088;border-radius:4px;width:100%;padding:12px 16px;color:#273631;font-weight:bold;display:flex;justify-content:space-between;align-items:center}.primary:hover{filter:brightness(1.08)}#auth-error{font-size:14px;color:#ffc5bd;min-height:20px;margin:12px 0}.text-button{border:0;background:none;width:100%;color:var(--gold);font-size:14px;padding:16px 0 0}.fine{text-align:center;color:var(--muted);font-size:12px;line-height:1.7;margin-bottom:0}.gate-footer{position:absolute;left:7vw;bottom:7vh;color:var(--gold);font-family:Georgia,serif;letter-spacing:.15em;font-size:14px}.gate-footer span{display:block;font-family:Tahoma,sans-serif;font-size:22px;letter-spacing:0;margin-top:10px}#hud{position:fixed;inset:0;pointer-events:none}#hud button,#hud input,.chat,.map{pointer-events:auto}.player{position:absolute;top:24px;left:24px;display:flex;gap:13px;padding:14px;width:286px}.portrait{display:grid;place-items:center;border:1px solid #d4ba7c66;border-radius:50%;width:52px;height:52px;background:radial-gradient(#496c69,#173c42);font-size:30px;color:var(--gold)}.player-info{flex:1}.player-name{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.player-name span{color:var(--gold)}.meter{height:15px;border-radius:3px;background:#071c26;border:1px solid #c2d4ca22;position:relative;overflow:hidden;margin:5px 0}.meter i{position:absolute;inset:0;width:100%;transition:width .15s}.meter.hp i{background:linear-gradient(90deg,#a25361,#e19a91)}.meter.mp i{background:linear-gradient(90deg,#407d95,#87c1d5)}.meter span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:14px;color:#fff;text-shadow:0 1px 3px #000}.zone{text-align:center;position:absolute;top:27px;left:50%;transform:translateX(-50%);text-shadow:0 2px 8px #04252d}.zone h2{font-size:24px;margin:7px 0}.zone #connection{font-size:12px;color:#e4e9df}.right-stack{position:absolute;right:24px;top:24px;width:208px;display:grid;gap:15px}.map{padding:12px}.map-head,.map-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px}.map-head b{font-size:14px}.map-foot{color:var(--muted)}#minimap{width:180px;height:150px;margin:8px 0;border-radius:4px}.quest-card{padding:17px;text-align:left;display:grid;gap:8px}.quest-card b{font-size:16px;color:#f3e1bc}.quest-card span:not(.eyebrow){font-size:14px}.quest-card small{font-size:12px;color:var(--muted)}.target{position:absolute;left:50%;top:120px;transform:translateX(-50%);width:240px;padding:10px 16px;text-align:center;font-size:14px}.target .meter{height:12px}.target .meter span{line-height:11px}.bottom{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);width:650px}.actionbar{display:flex;gap:7px;align-items:center;padding:11px 15px;background:#112e36ed}.skill{position:relative;background:#21434a;border:1px solid #d7c89966;border-radius:5px;width:75px;height:72px;padding:4px;overflow:hidden}.skill>span{display:block;font-size:28px;color:var(--gold);line-height:36px}.skill small{font-size:11px;display:block}.skill kbd{position:absolute;top:3px;left:5px;color:#d7dbcd;font-size:11px}.skill em{position:absolute;inset:0;background:#061d27aa;display:none;align-items:center;justify-content:center;font-style:normal;font-size:24px}.skill:hover{background:#365b5b}.potion>span{color:#e998a0}.currency{min-width:80px;display:grid;grid-template-columns:20px 1fr;color:var(--gold);font-size:16px}.currency small{grid-column:2;font-size:11px;color:var(--muted);margin-top:5px}.divider{width:1px;height:48px;background:#b2c1b344;margin:0 3px}.utility{background:none;border:0;min-width:58px;padding:0}.utility>span{font-size:24px;color:#c4d9ca;display:block}.utility small{font-size:11px;display:block;margin-top:8px}.exp{height:15px;background:#10262dcc;margin:0 14px 4px;position:relative;border:1px solid #e2d3a733;border-radius:3px;overflow:hidden}.exp i{position:absolute;inset:0;background:linear-gradient(90deg,#739b8b,#d4d4a1);width:0}.exp span{position:absolute;inset:0;text-align:center;font-size:10px;line-height:14px;text-shadow:0 1px 4px #000}.bottom-note{display:flex;justify-content:space-between;font-size:11px;color:#d4e3d6;margin:8px 14px;text-shadow:0 2px 3px #000}.chat{position:absolute;left:24px;bottom:160px;width:286px;padding:12px;background:#102d3677}.chat-title{font-size:13px;color:var(--gold);display:flex;justify-content:space-between}.chat-title span{font-size:10px;color:var(--muted)}#chat-lines{height:90px;overflow-y:auto;font-size:12px;line-height:1.6;margin-top:8px}#chat-lines b{color:var(--gold);font-weight:normal}#chat-form{display:flex;gap:4px}#chat-input{font-size:12px;padding:5px 7px;min-height:30px;margin:5px 0 0}#chat-form button{background:none;border:0;color:var(--gold)}.logout{position:absolute;bottom:24px;right:24px;background:#102c3299;border:1px solid #d1e6d844;border-radius:5px;font-size:12px;padding:8px 12px}#notices{position:absolute;top:28%;left:50%;transform:translateX(-50%);display:grid;gap:7px;text-align:center;width:420px}#notices div{background:#132f39e8;padding:10px 16px;border:1px solid #dfc69766;border-radius:4px;font-size:14px}#interact{position:absolute;bottom:175px;left:50%;transform:translateX(-50%)}#interact button{padding:12px 18px;color:var(--gold);font-size:14px}kbd{font-family:inherit}#interact kbd{border:1px solid #b9cabc66;padding:3px 7px;margin-right:10px}dialog{width:min(480px,90vw);max-height:85vh;padding:28px;color:var(--ink);overflow:auto}dialog::backdrop{background:#051b2777;backdrop-filter:blur(5px)}dialog h2{margin:10px 0 20px}dialog p{line-height:1.7;font-size:14px}.close{position:absolute;right:13px;top:10px;border:0;background:none;font-size:28px;color:var(--muted)}.item{display:flex;align-items:center;gap:14px;border:1px solid #c7d9c02b;background:#28434966;padding:13px;margin:9px 0;border-radius:5px}.item .icon{font-size:28px;color:var(--gold);width:35px}.item .desc{flex:1;font-size:14px}.item .desc small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.item button{border:1px solid #c8c89b66;padding:7px 12px;background:#395954;border-radius:4px;font-size:13px}.quest-reward{padding:16px;border:1px solid #dcc59155;background:#54706622;border-radius:5px}dl{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:14px}dt{color:var(--gold)}dd{margin:0;color:var(--muted)}#labels,#floaters{position:fixed;inset:0;pointer-events:none;overflow:hidden}.label{position:absolute;white-space:nowrap;transform:translate(-50%,-100%);text-shadow:0 2px 4px #00151c,0 0 5px #00151c;font-size:12px;color:white}.label.npc{color:#ffe0a4;font-size:14px}.label.mob{color:#ffe1cb}.label.self{color:#d3ffdf}.floater{position:absolute;color:#fff0ac;text-shadow:0 2px 6px #071e28;font-size:26px;font-weight:bold;transform:translate(-50%,-50%)}@media(max-width:1050px){.entry{right:4vw;width:350px;padding:22px}.brand{left:4vw;top:17vh}.brand h1{font-size:55px}.brand .eyebrow{font-size:10px}.player{left:12px;top:12px;width:250px}.right-stack{right:12px;top:12px;width:184px}.map{padding:8px}#minimap{width:166px;height:138px}.chat{left:12px;width:235px;bottom:145px}.bottom{width:600px}.actionbar{padding:9px;gap:4px}.currency{min-width:65px}.zone{top:20px}.zone h2{font-size:19px}.zone .eyebrow{display:none}}@media(max-width:750px){.brand{display:none}.entry{right:50%;transform:translate(50%,-50%);max-height:95vh;overflow:auto}.gate-footer{display:none}.right-stack{display:none}.chat{display:none}.zone{left:auto;right:15px;transform:none}.bottom{width:96vw}.actionbar{justify-content:center}.currency{min-width:45px}.skill{width:60px}.utility{min-width:40px}.bottom-note{font-size:10px}.logout{bottom:150px}.player{width:230px}.bottom-note span:first-child{max-width:65%}} #google-login{width:100%;margin-bottom:8px;background:#fff;color:#1f1f1f;border:1px solid #747775}#google-note{line-height:1.6} /* RPG inventory: original vector item art and equipment panel. */ #bag-dialog{width:min(850px,94vw);background:linear-gradient(140deg,#1c363d,#0c2029);border:1px solid #b49a63;padding:28px;box-shadow:0 0 0 4px #091921,0 24px 80px #0008} .bag-summary,.bag-grid-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:12px 0 20px;color:var(--muted);font-size:13px}.bag-summary b{color:var(--gold)} .bag-layout{display:grid;grid-template-columns:220px 1fr;gap:24px}.equipment-pane{padding:22px 16px;text-align:center;border:1px solid #c8b27755;background:radial-gradient(ellipse at 50% 40%,#38606455,transparent 65%),#071b2477;border-radius:6px}.equipment-pane h3{font-size:16px;color:var(--gold)} #equipped-art{display:grid;place-items:center;height:150px;margin:20px auto;border:1px solid #bca46e66;width:150px;background:radial-gradient(#71948544,#091b24);box-shadow:inset 0 0 30px #0007}#equipped-art .item-art{width:130px;height:130px} .item-art{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 5px #0008);flex-shrink:0} .inventory-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.inventory-slot{position:relative;aspect-ratio:1;background:linear-gradient(145deg,#29454d,#101f29);border:1px solid #73878366;border-radius:5px;padding:5px;box-shadow:inset 0 0 12px #0005;display:grid;place-items:center;min-width:0}.inventory-slot .item-art{width:100%;height:100%;max-height:74px}.inventory-slot.selected{border-color:#f3d599;box-shadow:inset 0 0 16px #a1884933,0 0 0 1px #e3c580}.inventory-slot:not(.empty):hover{background:#36575a}.inventory-slot.empty{background:#0b1c2455;opacity:.5}.slot-qty{position:absolute;bottom:4px;right:5px;font-size:12px;text-shadow:0 1px 3px #000}.slot-equipped{position:absolute;top:3px;left:3px;font-size:10px;background:#1a4c43;color:#bbffe0;padding:2px 4px;border-radius:3px} .item-detail{margin-top:16px;padding:16px;background:#071b2477;border:1px solid #a9bba333;border-radius:5px;min-height:160px}.item-detail h3{margin:0;color:var(--gold);font-size:17px}.item-detail p{font-size:13px;color:var(--muted)}.item-detail .primary{font-size:14px;justify-content:center}.bag-grid-title{margin-top:0;margin-bottom:12px}#shop .item{background:linear-gradient(120deg,#28434999,#11262d)}#shop .item-art{width:60px;height:60px}#npc-dialog{width:min(580px,94vw)} @media(max-width:650px){#bag-dialog{padding:20px}.bag-layout{grid-template-columns:1fr;gap:16px}.equipment-pane{display:grid;grid-template-columns:90px 1fr;column-gap:14px;text-align:left;padding:12px}.equipment-pane .eyebrow,.equipment-pane h3,.equipment-pane .muted{display:none}#equipped-art{grid-row:1/4;width:84px;height:84px;margin:0}#equipped-art .item-art{width:78px;height:78px}.equipment-pane p{margin:4px 0}.inventory-grid{gap:6px}.bag-summary{flex-wrap:wrap}} /* 0.1.5: bounded equipment / model / backpack panels */ #bag-dialog{width:min(1120px,96vw);height:min(700px,94dvh);max-height:94dvh;overflow:hidden;padding:22px;box-sizing:border-box}#bag-dialog[open]{display:flex;flex-direction:column}#bag-dialog h2{margin:8px 40px 10px 0}#bag-dialog>.eyebrow,#bag-dialog>h2,.bag-summary{flex-shrink:0}.bag-summary{margin:4px 0 14px}.bag-layout{grid-template-columns:175px minmax(150px,1fr) minmax(300px,1.4fr);gap:16px;min-height:0;flex:1}.equipment-pane{padding:14px 10px;min-height:0;overflow:auto}.equipment-pane h3{font-size:14px}#equipped-art{width:110px;height:110px;margin:16px auto}#equipped-art .item-art{width:100px;height:100px}.equipment-pane .primary{font-size:13px;justify-content:center}.equipment-pane .muted{font-size:12px}.character-pane{min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 65%,#496e6a80,transparent 70%);border-bottom:1px solid #c4ab7055}#character-preview{width:100%;height:100%;min-height:0;flex:1;touch-action:none;cursor:grab}.preview-controls{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:var(--muted);flex-shrink:0;padding:8px 0}.preview-controls button{background:#27434a;border:1px solid #b5a16b77;padding:4px 10px;border-radius:4px}.bag-items{display:flex;flex-direction:column;min-height:0;min-width:0}.bag-grid-title{flex-shrink:0}.bag-filters{display:flex;gap:5px;margin-bottom:12px;flex-shrink:0}.bag-filters button{flex:1;background:#10252e;border:1px solid #72887a66;padding:7px 3px;font-size:12px;border-radius:4px}.bag-filters button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#36524d}.bag-scroll{overflow:auto;min-height:0;flex:1;padding:2px 5px 3px 2px}.inventory-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.inventory-slot{height:auto;min-height:0}.inventory-slot .item-art{max-height:60px}.item-detail{flex-shrink:0;min-height:125px;padding:12px;margin-top:10px}.item-detail p{margin:8px 0;font-size:12px}.item-detail h3{font-size:15px}.item-detail .primary{padding:8px}#bag-dialog>.close{z-index:2;background:#17313a;border-radius:4px;right:12px;top:8px;width:36px;height:36px} @media(max-width:850px){.bag-layout{grid-template-columns:140px minmax(100px,.7fr) minmax(260px,1.3fr);gap:10px}#bag-dialog{padding:18px}.preview-controls span{display:none}} @media(max-width:620px){.bag-layout{grid-template-columns:110px 1fr;grid-template-rows:140px minmax(0,1fr);gap:10px}.equipment-pane{grid-column:1;grid-row:1/3;display:block;padding:8px}.equipment-pane h3,.equipment-pane .muted{display:block}#equipped-art{width:80px;height:80px;margin:10px auto}#equipped-art .item-art{width:72px;height:72px}.character-pane{grid-column:2;grid-row:1}.bag-items{grid-column:2;grid-row:2}.preview-controls{position:absolute;bottom:0;right:0}.inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bag-filters button{font-size:10px}.item-detail{min-height:100px}#bag-dialog h2{font-size:19px}} /* Game interactions: modal menu stays in the dialog's top layer. */ .game-context-menu{position:absolute;z-index:1000;width:190px;max-width:calc(100vw - 32px);padding:8px;background:#102c32;border:1px solid #d5bc80;border-radius:8px;box-shadow:0 8px 28px #0009;display:flex;flex-direction:column;gap:4px;color:#e8f1ea} .game-context-menu[hidden]{display:none} .game-context-menu strong{padding:8px;color:#f0d69d;font-size:14px} .game-context-menu button{text-align:left;padding:10px;border:0;background:transparent;color:inherit;border-radius:4px} .game-context-menu button:hover,.game-context-menu button:focus-visible{background:#34545a;outline:1px solid #d5bc80} .game-context-menu button:disabled{opacity:.45;cursor:default} .fullscreen{position:fixed;right:20px;bottom:62px;pointer-events:auto;z-index:5;padding:8px 12px;background:#19383ddd;color:#e8f1ea;border:1px solid #7d9994;border-radius:5px} .fullscreen[hidden]{display:none} #hud img,dialog img{user-select:none;-webkit-user-drag:none} #chat-input:focus,#chat-input:focus-visible{outline:none;box-shadow:none} .speech-bubble{position:absolute;transform:translate(-50%,-100%);width:max-content;max-width:min(240px,70vw);padding:9px 13px;border:1px solid #a4b8ad;background:rgba(247,250,240,.96);color:#203631;border-radius:12px;box-shadow:0 3px 12px #001a2540;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:none;pointer-events:none;z-index:3} .speech-bubble::after{content:'';position:absolute;bottom:-6px;left:calc(50% - 6px);width:10px;height:10px;background:#f7faf0;transform:rotate(45deg);border-right:1px solid #a4b8ad;border-bottom:1px solid #a4b8ad} .sound-open{position:fixed;right:20px;bottom:106px;pointer-events:auto;z-index:5;padding:8px 12px;background:#19383ddd;color:#e8f1ea;border:1px solid #7d9994;border-radius:5px} #sound-dialog{width:min(420px,94vw);max-height:90dvh;overflow:auto}#sound-dialog output{float:right;color:var(--gold)}#sound-dialog input[type=range]{padding:0;accent-color:var(--jade);border:0;background:transparent;cursor:pointer}#sound-dialog .sound-toggle{display:flex;align-items:center;gap:10px}#sound-dialog input[type=checkbox]{display:inline;width:20px;min-height:20px;margin:0;accent-color:var(--jade)}#audio-test{margin-top:20px} #sound-dialog{overflow-x:hidden}#sound-dialog input[type=range]{min-width:0;max-width:100%} .vendor-sell{margin-top:24px;padding-top:16px;border-top:1px solid #c5ad7155}.vendor-sell .item{margin-top:8px}.vendor-sell small{display:block;color:var(--muted);margin-top:5px}.vendor-sell button{padding:9px 12px;background:#345550;border:1px solid #a4b59b66;border-radius:4px}.vendor-sell input{max-width:160px}.sale-actions{display:flex;gap:10px}.sale-actions .primary{width:auto;flex:1;background:linear-gradient(110deg,#e4c48c,#f3d9ab)}:is(#sell-confirm,#buy-confirm){padding:12px;margin-top:12px;background:#0b202b;border:1px solid #ccb47766;border-radius:5px} /* Merchant frame */ #npc-dialog{width:min(960px,96vw);height:min(690px,94dvh);max-height:94dvh;padding:24px;overflow:hidden;border:1px solid #c8ad76;background:radial-gradient(ellipse at top left,#355b57 0,transparent 55%),#10282f;box-shadow:0 0 0 4px #10252dcc,0 24px 80px #00131bcc} #npc-dialog[open]{display:flex;flex-direction:column;gap:16px} .vendor-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-right:32px;flex-shrink:0}.vendor-header h2{margin:7px 0}.vendor-header b{color:var(--gold);white-space:nowrap}.vendor-header .muted{font-size:12px} .vendor-tabs{display:flex;gap:8px;flex-shrink:0}.vendor-tabs button{padding:10px 24px;border:1px solid #849c8c55;background:#10252c;border-radius:4px}.vendor-tabs button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:linear-gradient(#476359,#253f3d)} .vendor-content{flex:1;min-height:0;overflow:auto}.vendor-content>p{font-size:12px;margin:0 0 16px}.vendor-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;min-height:340px} #sell-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:10px} .vendor-slot{position:relative;display:flex;align-items:center;flex-direction:column;gap:8px;min-height:155px;padding:16px 6px 12px;border:1px solid #819c8b55;border-radius:6px;background:radial-gradient(circle at 50% 35%,#46766e88,transparent 65%),linear-gradient(140deg,#213f45,#0b2028);box-shadow:inset 0 1px 2px #ffffff12,0 5px 10px #0002}.vendor-slot[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 0 18px #edcf9130}.vendor-slot:hover{border-color:#edd1a0}.vendor-slot .item-art{width:68px;height:68px;filter:drop-shadow(0 8px 5px #0008)}.vendor-slot strong{font-size:12px}.vendor-slot small{font-size:11px;color:var(--gold)}.vendor-count{position:absolute;top:8px;right:8px;font-size:12px} .vendor-detail{border:1px solid #829b7955;border-radius:6px;background:#092029aa;padding:18px;overflow:auto}#sell-art{text-align:center;background:radial-gradient(ellipse,#4c7b6955,transparent 70%)}#sell-art .item-art{width:84px;height:84px}#sell-name{margin:8px 0 14px;color:var(--gold);font-size:18px}#sell-quantity{width:100%;max-width:none}#sell-total{color:var(--gold);font-weight:bold}#sell-review{width:100%;padding:10px;background:#35564f;border:1px solid #b4c19b88;border-radius:4px}:is(#sell-confirm,#buy-confirm){padding:10px;margin-top:12px}#sell-confirm-text{font-size:13px;margin:0 0 10px}.sale-actions{flex-wrap:wrap}.sale-actions button{padding:9px;border-radius:4px;border:1px solid #aab59066} #shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}#shop .item{display:flex;flex-direction:column;text-align:center;margin:0;padding:22px 12px;background:radial-gradient(ellipse at top,#466e6266,transparent 75%),#0c242c;border-color:#819c8b55}#shop .item-art{width:100px;height:100px;filter:drop-shadow(0 10px 6px #0008)}#shop .desc{margin:14px 0}#shop button{width:100%;padding:12px;border:1px solid #d0b97a;background:linear-gradient(#e4c68d,#f1d9aa);color:#233532;border-radius:4px}.vendor-footer{flex-shrink:0;display:flex;justify-content:space-between;gap:12px;border-top:1px solid #bca36744;padding-top:12px;font-size:11px;color:var(--muted)} @media(max-width:650px){#npc-dialog{padding:16px;gap:12px}.vendor-header{align-items:start;flex-direction:column;gap:8px}.vendor-header h2{font-size:21px}.vendor-tabs button{flex:1;padding:9px 4px}.vendor-layout{grid-template-columns:1fr}#sell-list{grid-template-columns:repeat(3,minmax(0,1fr))}.vendor-slot{min-height:130px}.vendor-slot .item-art{width:48px;height:48px}#shop{grid-template-columns:1fr}#shop .item{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:12px}#shop .item-art{width:64px;height:64px}#shop button{grid-column:1/3}.vendor-footer span{max-width:50%}} :is(#sell-confirm,#buy-confirm){width:min(420px,92vw);max-height:90dvh;overflow:auto;margin:auto;padding:26px;border:1px solid #dbc18a;border-radius:12px;background:radial-gradient(ellipse at top,#365e56,transparent 65%),#10272e;box-shadow:0 20px 90px #0009;text-align:center} :is(#sell-confirm,#buy-confirm)::backdrop{background:#03191fc9;backdrop-filter:blur(4px)} :is(#sell-confirm,#buy-confirm) h2{margin:10px 0 14px;font-size:24px} :is(#sale-art,#buy-art){width:116px;height:116px;display:grid;place-items:center;margin:0 auto 16px;border:1px solid #b9aa7555;border-radius:10px;background:radial-gradient(circle,#59897766,#0c252c);box-shadow:inset 0 0 20px #0003} :is(#sale-art,#buy-art) .item-art{width:88px;height:88px;filter:drop-shadow(0 8px 5px #0008)} #sell-confirm-text{font-size:16px;line-height:1.6}.sale-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;border-block:1px solid #c9b78244;padding:18px 0;margin-top:18px}.sale-summary span{font-size:13px;color:var(--muted)}.sale-summary strong{font-size:24px;color:var(--gold)} :is(#sell-confirm,#buy-confirm) .muted{font-size:11px;margin:18px 0}:is(#sell-confirm,#buy-confirm) .sale-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}:is(#sell-confirm,#buy-confirm) button{min-height:44px}:is(#sell-cancel,#buy-cancel){background:#25433f} #vendor-status{flex-shrink:0;margin:0;padding:10px 14px;border:1px solid #dc9f7888;background:#56362b;color:#ffe0c1;border-radius:5px;font-size:13px}#vendor-status[data-ok=true]{background:#264c40;border-color:#86c6a5;color:#d6f5dc} #buy-message{font-size:14px;line-height:1.7;color:var(--gold)}#buy-balance{font-size:13px;color:var(--muted)}#buy-description{font-size:18px} #buy-confirm[data-done=true] .sale-actions{grid-template-columns:1fr;justify-items:center} #buy-confirm[data-done=true] #buy-submit{width:min(220px,100%);text-align:center;justify-content:center} #buy-quantity-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0} #buy-quantity-row label{font-size:14px}#buy-quantity{width:110px;margin:0;text-align:center} #quest-meter{width:100%;height:14px;accent-color:var(--jade)}#npc-rewards{color:var(--gold)}#claim{justify-content:center}#quest-chapters{list-style:none;padding:0;display:grid;gap:8px}#quest-chapters li{padding:12px;border:1px solid #a6b99133;border-radius:5px;color:var(--muted)}#quest-chapters li[data-current=true]{border-color:var(--gold);background:#375348;color:var(--gold)} #character-dialog{width:min(720px,94vw);max-height:92dvh;overflow:auto;padding:26px;background:radial-gradient(ellipse at top left,#355b57,transparent 65%),#10282f;border:1px solid #c8ad76} #character-dialog h2{margin:10px 0 4px}#character-level{color:var(--gold);margin:0 0 20px}.character-stats-layout{display:grid;grid-template-columns:200px 1fr;gap:20px}.character-weapon-card{text-align:center;padding:20px 12px;border:1px solid #b7ac7655;border-radius:8px;background:#0b242c}.character-weapon-card .item-art{width:110px;height:110px;filter:drop-shadow(0 8px 6px #0009)}#character-attack{display:block;font-size:36px;color:var(--gold);margin:8px}#character-bonus{font-size:11px;color:var(--muted)}.character-values{margin:0;display:grid;gap:10px}.character-values>div{padding:12px;background:#0c232b99;border-bottom:1px solid #adc5ac33}.character-values dt{font-size:12px;color:var(--muted)}.character-values dd{margin:6px 0 0;font-size:16px;color:var(--gold)}.character-table-scroll{overflow-x:auto}.character-skill-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.character-skill-table th{color:var(--gold)}.character-skill-table td,.character-skill-table th{padding:10px 8px;border-bottom:1px solid #a3ba9a33;white-space:nowrap}#character-dialog>.muted{font-size:11px;line-height:1.6} @media(max-width:540px){.character-stats-layout{grid-template-columns:1fr}.character-weapon-card .item-art{width:72px;height:72px}.character-values{grid-template-columns:1fr 1fr}} /* Compact bottom HUD */ .bottom{bottom:6px;bottom:calc(6px + env(safe-area-inset-bottom));width:480px;max-width:calc(100vw - 20px)} .actionbar{padding:5px 7px;gap:5px;justify-content:center;border-radius:6px;background:#0c252cdd} .actionbar .skill{flex:0 0 46px;width:46px;height:46px;padding:2px;border-radius:4px} .actionbar .skill>span{font-size:24px;line-height:39px} .actionbar .skill small{display:none} .actionbar .skill kbd{font-size:9px;top:2px;left:3px;line-height:10px} .actionbar .skill em{font-size:17px} .actionbar #potion>span{line-height:26px;font-size:22px} .actionbar #potion small{display:block;font-size:9px;line-height:12px;white-space:nowrap} .actionbar .utility{flex:0 0 42px;min-width:0;width:42px;height:46px;border:1px solid #b9cca02b;border-radius:4px} .actionbar .utility>span{font-size:20px;line-height:24px} .actionbar .utility small{font-size:8px;line-height:12px;margin-top:1px;white-space:nowrap} .actionbar .currency{min-width:52px;font-size:11px;grid-template-columns:11px 1fr} .actionbar .currency small{font-size:8px;margin-top:2px} .actionbar .divider{height:30px;margin:0;width:1px;flex-shrink:0} .exp{height:10px;margin:0 7px 3px}.exp span{font-size:8px;line-height:9px} .save-indicator{position:absolute;left:12px;bottom:8px;font-size:10px;color:#d4e3d6;text-shadow:0 1px 3px #000;pointer-events:none} #interact{bottom:88px}#interact button{padding:8px 12px;font-size:12px} @media(max-width:620px){.bottom{max-width:calc(100vw - 12px);width:420px}.actionbar{padding:4px;gap:3px}.actionbar .skill{flex-basis:40px;width:40px;height:42px}.actionbar .utility{flex-basis:34px;width:34px;height:42px}.actionbar .currency{min-width:42px;font-size:10px}.save-indicator{bottom:78px;font-size:9px}.logout{bottom:90px}} @media(max-width:380px){.actionbar{gap:2px}.actionbar .skill{flex-basis:36px;width:36px}.actionbar .utility{flex-basis:30px;width:30px}.actionbar .currency{min-width:36px;font-size:9px}} .craft-recipe{display:flex;align-items:center;gap:24px;border:1px solid #cbb57755;background:radial-gradient(ellipse at left,#44735b77,transparent),#10282f;padding:22px;border-radius:8px}.craft-recipe .item-art{width:100px;height:100px;filter:drop-shadow(0 8px 6px #0008)}.craft-recipe h2{margin:8px 0}.craft-recipe p{font-size:13px}#craft-quantity{max-width:150px}#craft-cost{color:var(--gold);font-size:15px}#craft-review{max-width:340px;justify-content:center}#vendor-craft>.muted{margin-top:14px} #craft-confirm{width:min(420px,92vw);max-height:90dvh;overflow:auto;text-align:center;padding:26px;border:1px solid #dbc18a;background:radial-gradient(ellipse at top,#365e56,transparent 65%),#10272e;border-radius:12px}#craft-confirm::backdrop{background:#03191fc9;backdrop-filter:blur(4px)}#craft-confirm>.item-art{width:100px;height:100px}#craft-result{color:var(--gold);line-height:1.8}#craft-confirm .sale-actions{display:flex;gap:10px;justify-content:center}#craft-confirm button{min-height:44px;flex:1;justify-content:center}#craft-cancel{background:#25433f}#craft-confirm[data-done=true] #craft-submit{max-width:220px;text-align:center}#craft-confirm h2{font-size:23px} @media(max-width:620px){.vendor-tabs{gap:4px}.vendor-tabs button{font-size:12px;padding:9px 5px}.craft-recipe{padding:14px;gap:12px}.craft-recipe .item-art{width:70px;height:70px}} /* Alchemy quantity controls: no yellow focus ring. */ .craft-amount{display:flex;align-items:center;gap:8px;margin-top:7px;max-width:360px} .craft-amount button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #b4cdbc44;border-radius:5px;background:#25433f;text-align:center} .craft-amount #craft-quantity{margin:0;min-width:0;width:100px;text-align:center;appearance:textfield;-moz-appearance:textfield} #craft-quantity::-webkit-inner-spin-button,#craft-quantity::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} #craft-quantity:focus,#craft-quantity:focus-visible{outline:none;box-shadow:none;border-color:var(--jade)} #craft-limit{font-size:12px;margin:8px 0} #bestiary-dialog{width:min(880px,94vw);border:1px solid #dbc18a;background:radial-gradient(ellipse at top left,#365e56,transparent 65%),#10272e;border-radius:12px}#bestiary-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.bestiary-card{background:#09222bb3;border:1px solid #b4cdbc44;border-radius:8px;padding:18px;text-align:center}.bestiary-emblem{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 16px;border-radius:50%;font-size:48px;background:radial-gradient(#496c6955,#10272e);border:1px solid #b4cdbc44;color:#59d7aa}.bestiary-emblem.fox{color:#f4c99d}.bestiary-emblem.golem{color:#859cb1}.bestiary-card .eyebrow{font-size:10px;letter-spacing:.03em}.bestiary-card dl{text-align:left;gap:12px;grid-template-columns:1fr auto}.bestiary-count{border-top:1px solid #b4cdbc44;padding-top:14px;color:var(--gold)}.journal-open{justify-content:center;margin-top:16px}@media(max-width:650px){#bestiary-list{grid-template-columns:1fr}.bestiary-card{padding:16px}} /* Right-side navigation; combat controls remain bottom-centre. */ .bottom{width:310px}.actionbar{justify-content:center} .right-stack .quest-card{position:fixed;left:24px;top:150px;width:230px} /* Single narrow column; no surrounding panel. */ .side-menu{position:absolute;right:6px;bottom:8px;width:58px;max-height:calc(100dvh - 250px);overflow-y:auto;scrollbar-width:thin;pointer-events:auto;padding:3px} .side-adventure,.side-system{display:flex;flex-direction:column;align-items:center;gap:5px} .side-system{margin-top:9px;padding-top:8px;border-top:1px solid #b4cdbc44} .side-menu .utility,.side-menu .sound-open,.side-menu .fullscreen,.side-menu .logout{position:static;flex:none;min-width:0;width:48px;height:48px;min-height:48px;padding:3px 1px;background:radial-gradient(circle at 35% 20%,#456c5b,#15333b 80%);border:1px solid #cdbd8a99;border-radius:50%;box-shadow:0 2px 5px #00182066;color:var(--ink);font-size:8px;text-align:center;z-index:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px} .side-menu .utility>span{font-size:21px;line-height:23px;color:var(--gold)} .side-menu .utility small{font-size:8px;line-height:12px;margin:0;white-space:nowrap} .side-menu .sound-open::before{content:'♫';font-size:21px;line-height:23px;color:var(--gold)} .side-menu .fullscreen::before{content:'⛶';font-size:21px;line-height:23px;color:var(--gold)} .side-menu .logout::before{content:'↪';font-size:21px;line-height:23px;color:var(--gold)} .side-menu button:hover{filter:brightness(1.2)} @media(max-width:1050px){.right-stack .quest-card{left:12px;top:130px;width:220px}} @media(max-width:750px){.side-menu{top:100px;bottom:78px;max-height:none;right:4px}.bottom{width:290px}} @media(max-height:520px){.side-menu{top:85px;bottom:78px;max-height:none}.right-stack .map,.right-stack .quest-card{display:none}} /* Icon-only navigation with native hover labels and a persistent fold button. */ .side-menu{display:flex;flex-direction:column;overflow:visible;max-height:none} #side-menu-items{min-height:0;overflow-y:auto;scrollbar-width:thin;max-height:calc(100dvh - 315px)} .side-menu .utility small{display:none} .side-menu .sound-open,.side-menu .fullscreen,.side-menu .logout{font-size:0;gap:0} .side-menu .utility>span,.side-menu .sound-open::before,.side-menu .fullscreen::before,.side-menu .logout::before{font-size:25px;line-height:30px} #menu-toggle{flex:none;align-self:center;width:48px;height:48px;margin-top:8px;border:1px solid #e5c88d;border-radius:50%;background:radial-gradient(circle at 35% 20%,#e4c990,#7e704c);color:#fff6db;font-size:32px;line-height:40px;box-shadow:0 2px 5px #00182066} @media(max-width:750px),(max-height:520px){#side-menu-items{max-height:none;flex:0 1 auto}.side-menu{justify-content:flex-end}} #menu-tooltip{position:fixed;z-index:40;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 12px);padding:8px 12px;border:1px solid #d9c08a;border-radius:6px;background:#102c32f5;color:#f5e4be;font-size:12px;line-height:18px;box-shadow:0 3px 12px #00182066} #menu-tooltip{white-space:pre-line;max-width:min(300px,calc(100vw - 12px));line-height:1.7} #quest-journal-dialog{width:min(820px,94vw);border:1px solid #dbc18a;border-radius:12px;background:radial-gradient(ellipse at top left,#365e56,transparent 65%),#10272e}#quest-journal-list{display:grid;gap:12px}.journal-chapter{padding:18px;background:#09222baa;border:1px solid #b4cdbc44;border-radius:8px}.journal-chapter header{display:flex;justify-content:space-between;gap:10px}.journal-chapter h3{margin:12px 0;color:var(--gold)}.journal-status{font-size:12px;color:var(--muted)}.journal-chapter[data-status=ready]{border-color:var(--jade)}.journal-chapter[data-status=ready] .journal-status{color:var(--jade)}.journal-chapter[data-status=locked]{opacity:.7}.journal-chapter progress{width:100%;height:10px;accent-color:var(--jade)}.journal-progress{font-size:12px;text-align:right;margin:5px 0}.journal-rewards{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.journal-rewards span{padding:6px 10px;border-radius:5px;background:#36554e66;color:var(--gold);font-size:12px}#quest-menu[data-ready=true]{border-color:var(--jade);box-shadow:0 0 8px #7fcfb777} #minimap-open{display:block;border:0;background:none;padding:0;width:100%;line-height:0;border-radius:4px}#world-map-dialog{width:min(900px,96vw);max-height:92dvh;border:1px solid #dbc18a;background:radial-gradient(ellipse at top left,#365e56,transparent 65%),#10272e;border-radius:12px}.world-map-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;align-items:start}#world-map-canvas{display:block;width:100%;height:auto;border:1px solid #91b29a55;border-radius:8px}.world-map-legend h3{font-size:14px;color:var(--gold)}.world-map-legend p{font-size:12px;display:flex;align-items:center;gap:8px}.world-map-legend i{display:inline-grid;place-items:center;flex:0 0 18px;height:18px;border-radius:50%;color:#10262d;font-style:normal;font-weight:bold}.world-map-legend .muted{display:block}#world-map-position{font-size:13px;color:var(--jade)}@media(max-width:650px){.world-map-layout{grid-template-columns:1fr}.world-map-legend{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.world-map-legend h3,.world-map-legend .muted{grid-column:1/-1}} .waypoint-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}.waypoint-controls button{border:1px solid #cdbd8a77;border-radius:5px;background:#25433f;padding:8px 12px;font-size:12px;min-height:36px}#waypoint-map-status{font-size:12px;color:var(--gold)}#world-map-canvas{cursor:crosshair}#waypoint-hud{position:absolute;left:50%;top:78px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:6px 10px;font-size:12px;max-width:calc(100vw - 150px)}#waypoint-arrow{display:block;font-size:22px;line-height:26px;color:var(--gold)}#waypoint-dismiss{background:none;border:0;color:var(--muted);font-size:20px;padding:0 3px}#waypoint-label{color:#f5e4be}@media(max-width:750px){#waypoint-hud{top:112px;max-width:calc(100vw - 150px)}} /* Compact, steady warning: no flashing or additional screen overlay. */ #player-panel.low-health{box-shadow:inset 0 0 0 1px #dc8d8d} #health-warning{font-size:10px;line-height:1.4;color:#ffd2c9;margin:2px 0} #potion.health-reminder{border-color:#efaaa0;box-shadow:inset 0 0 0 1px #efaaa088;background:#593c3e} .actionbar .skill.action-unavailable>span{opacity:.4} .actionbar .skill[data-action-state=mana] em{color:#a9e0f3;font-size:12px} .actionbar .skill[data-action-state=empty] em,.actionbar .skill[data-action-state=full] em,.actionbar .skill[data-action-state=weapon] em{font-size:11px} .actionbar .skill em{pointer-events:none} .chat-tabs{display:flex;gap:5px;margin:4px 0}.chat-tabs button{font-size:11px;padding:3px 8px;border:1px solid #92b3a955;background:#183b3d;border-radius:4px}.chat-tabs button[aria-pressed=true]{color:var(--gold);border-color:#ddc795} #combat-lines{height:110px;overflow-y:auto;font-size:11px;line-height:1.6;overflow-wrap:anywhere;color:#e2d8b7}#combat-lines>div{padding:4px 0;border-bottom:1px solid #a3c2b51a} .label.mob .mob-name{display:block;font-size:11px}.mob-health{width:48px;height:5px;margin:3px auto 0;background:#261d22dd;border:1px solid #182321;border-radius:3px;overflow:hidden}.mob-health i{display:block;height:100%;background:#cf737a}.selected-mob .mob-health{width:58px;height:6px;border-color:#f0d290;box-shadow:0 0 3px #101b20}.selected-mob .mob-name{color:#ffe4a5} /* Full-width EXP anchored independently of the compact action bar. */ #hud>.exp{position:absolute;left:0;right:0;bottom:0;width:100%;height:10px;margin:0;border-radius:0;border:0;border-top:1px solid #b3d8da66;background:#0a202ae8;pointer-events:none} #hud>.exp i{background:linear-gradient(0deg,#3387be,#86d7f0)} #hud>.exp span{font-size:8px;line-height:9px} #hud .bottom{bottom:calc(15px + env(safe-area-inset-bottom))} .runtime-status{bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;max-width:calc(50vw - 230px);padding:4px 8px;border-radius:5px;background:#102c32b8;font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums;color:#e4efe7} .runtime-status>span{white-space:nowrap} .runtime-status #save-state{flex-basis:100%;white-space:normal;color:#ccdcd1} @media(min-width:1300px){.runtime-status #save-state{flex-basis:auto}} @media(max-width:750px){.runtime-status{bottom:calc(90px + env(safe-area-inset-bottom));max-width:calc(100vw - 92px);font-size:10px}} /* Original fantasy menu emblems. */ .side-menu #map-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/map-open.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #quest-menu::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/quest-menu.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #character-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/character-open.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #bag-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/bag-open.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #help-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/help-open.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #journal-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/journal-open.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #sound-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/sound-open.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #fullscreen::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/fullscreen.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #logout::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/logout.svg?v=0.1.172) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu .utility>span{display:none} #character-dialog{border:1px solid #d1b479;border-radius:16px;padding:28px;background:radial-gradient(ellipse at 15% 0,#326c6b99,transparent 55%),radial-gradient(ellipse at 100% 90%,#30335488,transparent 55%),#0c202a;box-shadow:inset 0 0 0 5px #112c34,inset 0 0 0 6px #bda57544,0 22px 80px #000a;scrollbar-width:thin;scrollbar-color:#b9a274 #102c35} #character-dialog>.eyebrow{letter-spacing:.22em;color:#dfc48d}#character-name{font-family:Georgia,Tahoma,serif;font-size:30px;color:#fff0c9;text-shadow:0 2px 14px #d3b77755}#character-level{display:inline-block;margin:0 0 20px;padding:5px 16px;border:1px solid #bfa16977;border-radius:20px;background:#bb9a4820;color:#e5cc93} #character-dialog .close{border-radius:50%;width:32px;height:32px;font-size:24px;background:#173941;border:1px solid #bca26e88;display:grid;place-items:center;padding:0}#character-dialog .close:focus-visible{outline:2px solid #91dfd1;outline-offset:3px} .character-weapon-card{position:relative;overflow:hidden;border:1px solid #bfa36b88;border-radius:12px;background:radial-gradient(circle at 50% 30%,#5eaa9955,transparent 52%),linear-gradient(145deg,#173d46,#101f30);box-shadow:inset 0 0 30px #05131c99} #character-art{position:relative;margin:10px auto 20px;width:150px;height:150px;display:grid;place-items:center;border:1px solid #d8bd7a66;border-radius:50%;background:repeating-conic-gradient(from 0deg,#d5c38533 0deg 1deg,transparent 1deg 30deg);box-shadow:0 0 25px #70cab72a,inset 0 0 22px #6cc8b533}#character-art::before{content:"";position:absolute;inset:10px;border:1px dashed #b8d9c455;border-radius:50%;pointer-events:none}#character-art .item-art{filter:drop-shadow(0 6px 8px #0008);z-index:1} .character-values>div{border:1px solid #b8a16b44;border-radius:8px;background:linear-gradient(135deg,#25505b66,#0d222e);box-shadow:inset 0 1px #d6c19322}.character-values dd{line-height:1.6;color:#f0ddaf}.character-values>div:first-child{border-left:3px solid #d4858e}.character-values>div:nth-child(2){border-left:3px solid #77bcd6}.character-values>div:nth-child(3){border-left:3px solid #cdb878}.character-skill-table th{background:#bfa56913}.character-skill-table tbody tr:nth-child(even){background:#79bdb00a}.character-skill-table tbody tr:hover{background:#79bdb017} .side-menu #side-menu-items button{background:radial-gradient(circle at 35% 25%,#4c807d,#173941 65%,#0d222e);border:1px solid #cfb57b99;box-shadow:inset 0 0 0 3px #102d3688,0 3px 8px #00131c88;transition:transform .15s,box-shadow .15s}.side-menu #side-menu-items button:hover{transform:translateX(-3px);box-shadow:inset 0 0 0 2px #d9be8066,0 0 13px #81d8c566;border-color:#f1dca4} @media(prefers-reduced-motion:reduce){.side-menu #side-menu-items button{transition:none}} @media(max-width:540px){#character-dialog{padding:20px}#character-art{width:110px;height:110px;margin:0 auto 12px}} /* Compact character pages with softer type and restrained decoration. */ #character-dialog{width:min(640px,94vw);max-height:90dvh;padding:22px 24px;font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;font-size:13px;line-height:1.5;border-radius:18px;background:radial-gradient(ellipse at top left,#38666b,transparent 65%),#152e3b} #character-dialog>.eyebrow{font-size:10px;letter-spacing:.14em;color:#b8cec9}#character-name{font-family:inherit;font-size:23px;font-weight:500;margin:8px 0 2px}#character-level{font-size:11px;padding:2px 10px;margin:0 0 12px} .character-tabs{display:flex;gap:6px;margin:0 0 14px;border-bottom:1px solid #adcabc33;padding-bottom:8px}.character-tabs button{border:1px solid #abc7bd44;background:#21434b;border-radius:16px;padding:5px 20px;font-size:12px;color:#bed6d4}.character-tabs button[aria-pressed=true]{background:#93caba;color:#18373e;border-color:#c1e3d3} #character-dialog .character-stats-layout{grid-template-columns:160px minmax(0,1fr);gap:14px;margin:0 0 12px}#character-dialog .character-weapon-card{padding:14px 10px;border-color:#c8ba8c66}#character-dialog #character-art{width:104px;height:104px;margin:0 auto 10px;background:radial-gradient(circle,#91d8c333,transparent 70%)}#character-dialog #character-art .item-art{width:82px;height:82px}#character-dialog .character-weapon-card h3{font-size:14px;font-weight:500;margin:7px 0}#character-dialog .character-weapon-card strong{font-size:27px;margin:5px 0}#character-dialog #character-bonus{font-size:10px;line-height:1.6;margin:6px 0;color:#adc7c7} #character-dialog .character-values{gap:7px;grid-template-columns:1fr 1fr}#character-dialog .character-values>div{padding:9px 10px;background:#193b4688;border-radius:9px}#character-dialog .character-values>div:nth-child(3){grid-column:1/-1;grid-row:3}#character-dialog .character-values dt{font-size:10px;font-weight:400;color:#b5cdcc}#character-dialog .character-values dd{font-size:14px;line-height:1.5;margin:4px 0 0;color:#f2e6c9;font-variant-numeric:tabular-nums}#character-dialog #character-xp{font-size:12px} #character-dialog #bestiary-open{width:auto;padding:7px 16px;font-size:11px;background:#31545b;color:#dbe9df;border:1px solid #9fc4b766;border-radius:8px}#character-skills-page>h3{font-size:15px;font-weight:500;margin:8px 0 12px}.character-skill-table{font-size:12px}.character-skill-table td,.character-skill-table th{padding:9px 7px}.character-skill-table th{font-weight:500}#character-skills-page>.muted{font-size:10px;line-height:1.6;margin:12px 0 0} #menu-tooltip{font-family:"Leelawadee UI",Tahoma,sans-serif;font-size:12px;font-weight:400;border-radius:8px;border-color:#bcd9bc88} @media(max-width:480px){#character-dialog{padding:18px 14px}#character-dialog .character-stats-layout{grid-template-columns:115px minmax(0,1fr);gap:9px}#character-dialog #character-art{width:80px;height:80px}#character-dialog #character-art .item-art{width:64px;height:64px}#character-dialog .character-values>div{padding:6px}#character-dialog .character-values dd{font-size:12px}} /* Shared compact dialog language; long collections scroll inside their panes. */ dialog{font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;font-size:13px;line-height:1.5;max-width:94vw;max-height:90dvh;scrollbar-width:thin;scrollbar-color:#9abdb4 #15333b} dialog h2{font-size:21px;font-weight:500;margin:12px 0 8px}dialog h3{font-size:15px;font-weight:500}dialog .eyebrow{font-size:10px;letter-spacing:.13em}dialog .muted{font-size:11px;line-height:1.6}dialog label{font-size:12px;margin-top:10px}dialog .primary{font-size:12px;padding:9px 14px}dialog input,dialog select{font-size:13px;min-height:36px;padding:8px 10px}dialog p,dialog dd{overflow-wrap:anywhere}dialog .close{border-radius:50%;width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:24px} #bag-dialog,#npc-dialog,#bestiary-dialog,#quest-journal-dialog,#world-map-dialog,#help-dialog,#sound-dialog{padding:22px;border-radius:16px;background:radial-gradient(ellipse at top left,#32606488,transparent 60%),#142c37;border:1px solid #c5b58688} .bag-layout>*,.world-map-layout>*,.character-stats-layout>*{min-width:0}.bag-summary{font-size:12px}.bag-filters button{font-size:11px;padding:5px 9px}.item-detail{font-size:12px}.journal-chapter{padding:12px}.journal-chapter header{flex-wrap:wrap}.journal-chapter h3{margin:8px 0}.journal-rewards{gap:5px;margin-top:9px}.journal-rewards span{font-size:11px;padding:4px 7px} #quest-journal-list,#bestiary-list{max-height:58dvh;overflow-y:auto;scrollbar-width:thin;padding-right:4px} #help-dialog,#sound-dialog{width:min(520px,94vw)}#help-dialog dl{font-size:12px;line-height:1.6}#sound-dialog label{margin-top:8px}#sound-dialog input[type=range]{min-height:24px;padding:0;margin-top:4px} #character-preview-slot .character-pane{padding:0;border:0;background:radial-gradient(ellipse at 50% 75%,#7cd6bb33,transparent 65%);min-width:0}#character-preview-slot #character-preview{display:block;width:100%;height:180px;touch-action:none;cursor:grab}#character-preview-slot #character-preview:active{cursor:grabbing}#character-preview-slot .preview-controls{gap:4px;justify-content:center;align-items:center}#character-preview-slot .preview-controls span{font-size:9px}#character-preview-slot .preview-controls button{padding:2px 6px;min-width:24px;font-size:16px} @media(max-width:540px){#bag-dialog,#npc-dialog,#bestiary-dialog,#quest-journal-dialog,#world-map-dialog,#help-dialog,#sound-dialog{padding:16px}#character-preview-slot #character-preview{height:150px}} /* Meditation occupies the next action slot after potion. */ .bottom{width:360px;max-width:calc(100vw - 12px)} .actionbar .meditate-action{position:relative;flex:0 0 46px;width:46px;height:46px;padding:2px;border-radius:4px;border:1px solid #b6d6bc88;background:radial-gradient(circle,#3c7971,#15343e);color:#cfefd7;display:grid;place-items:center} .meditate-action span{font-size:24px}.meditate-action kbd{position:absolute;left:3px;top:2px;font-size:9px;line-height:10px} .meditate-action[aria-pressed=true]{box-shadow:inset 0 0 10px #83dec888;border-color:#c5f4d5;background:#477f6e} @media(max-width:620px){.actionbar .meditate-action{flex-basis:40px;width:40px;height:42px}} @media(max-width:380px){.actionbar .meditate-action{flex-basis:36px;width:36px}} #hotbar-settings{position:absolute;right:0;bottom:calc(100% + 4px);font-size:10px;border:1px solid #8cacaa66;border-radius:8px;background:#17383de8;padding:3px 8px;color:#d4e5de} #hotbar-dialog{width:360px;padding:22px;max-width:calc(100vw - 24px)}#hotbar-options label{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:8px;margin-top:8px;font-size:12px}#hotbar-options select{margin:0;min-height:34px;padding:5px 8px;font-size:12px}#hotbar-status{font-size:12px;color:var(--jade)} /* Hotbar editor: stable controls preserve keyboard focus after swaps. */ #hotbar-dialog{width:390px;border-radius:16px;background:radial-gradient(ellipse at top left,#32606488,transparent 60%),#142c37;border:1px solid #c5b58688} #hotbar-dialog h2{padding-right:26px}#hotbar-dialog .muted{font-size:12px} #hotbar-preview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0 16px} .hotbar-tile{position:relative;min-width:0;min-height:76px;padding:18px 2px 5px;border:1px solid #8cacaa77;border-radius:6px;background:#21434a;cursor:grab;user-select:none} .hotbar-tile kbd{position:absolute;top:3px;left:5px;font-size:10px;color:var(--gold)} .hotbar-tile span{display:block;font-size:25px;color:var(--gold)}.hotbar-tile small{display:block;font-size:10px;overflow-wrap:anywhere;line-height:1.5} .hotbar-tile[aria-pressed=true],.hotbar-tile.drop-target{border-color:var(--gold);background:#456458;box-shadow:inset 0 0 0 1px var(--gold)} .hotbar-tile.drag-source{opacity:.5}.hotbar-tile:active{cursor:grabbing} #hotbar-hint{font-size:11px;color:var(--gold);min-height:36px;margin:8px 0 0} #hotbar-status{min-height:20px;margin:12px 0}#hotbar-reset{padding:8px 12px;border:1px solid #8cacaa77;border-radius:5px;background:#25433f;font-size:12px} #help-hotbar{display:grid;grid-template-columns:25px 1fr;gap:5px 8px}#help-hotbar dt{color:var(--gold)}#help-hotbar dd{margin:0} /* Cloud hotbar status stays inside the existing compact editor. */ #hotbar-status[data-state=error],#hotbar-status[data-state=auth-error],#hotbar-status[data-state=conflict]{color:#ffd4a1} #hotbar-retry,#hotbar-conflict button{padding:8px 10px;border:1px solid #b6b18788;border-radius:5px;background:#25433f;font-size:12px;margin:0 5px 10px 0} #hotbar-conflict{padding:10px;margin-bottom:12px;border:1px solid #c9ad7788;border-radius:6px;background:#57442d44} #hotbar-conflict p{font-size:12px;margin:0 0 10px}#hotbar-conflict button{display:block;width:100%;margin:6px 0 0} #hotbar-settings[data-sync-state=error],#hotbar-settings[data-sync-state=conflict],#hotbar-settings[data-sync-state=auth-error]{border-color:#ffd4a1;color:#ffd4a1} /* Three compact equipment slots, preserving the existing bag and preview. */ .equipment-pane .gear-slot{display:grid;grid-template-columns:38px 1fr;gap:3px 7px;text-align:left;padding:8px 0;border-bottom:1px solid #9bb8a633} .gear-slot>span{grid-column:1/-1;font-size:10px;color:var(--gold)} #bag-dialog .gear-slot>div{grid-column:1;grid-row:2/4;width:38px;height:38px;margin:0;display:grid;place-items:center;border:1px solid #9bb8a644;border-radius:5px} #bag-dialog .gear-slot .item-art{width:32px;height:32px}.equipment-pane .gear-slot p{font-size:11px;margin:0;align-self:center;overflow-wrap:anywhere} .gear-slot button{grid-column:2;font-size:10px;padding:3px 5px;background:#25433f;border:1px solid #8cacaa66;border-radius:4px} #equipment-stat{font-size:11px;line-height:1.6}.bag-filters{flex-wrap:wrap}.bag-filters button{white-space:nowrap} @media(max-width:650px){.equipment-pane{display:block}.equipment-pane .gear-slot>span{display:block}.equipment-pane .gear-slot p{margin:0}} @media(max-width:380px){.equipment-pane .gear-slot{grid-template-columns:1fr}#bag-dialog .gear-slot>div{grid-row:auto}.gear-slot button{grid-column:1}#bag-dialog .gear-slot>div{display:none}} #shop .item{padding:12px 8px}#shop .item-art{width:64px;height:64px}#shop .desc{margin:8px 0}#shop button{padding:8px} /* Inventory: equipment board and a spacious item grid. */ #bag-dialog{width:min(1000px,96vw);height:min(620px,94dvh)} #bag-dialog .bag-layout{grid-template-columns:minmax(280px,.9fr) minmax(320px,1.4fr);grid-template-rows:minmax(0,1fr);gap:18px} #bag-dialog .equipment-pane{display:flex;flex-direction:column;grid-column:auto;grid-row:auto;padding:12px;overflow:auto;background:radial-gradient(ellipse at 50% 45%,#38706555,transparent 72%),#0a252a} #bag-dialog .equipment-pane h3{display:block;margin:0 0 12px;font-size:13px;letter-spacing:.04em} #bag-dialog .equipment-board{display:grid;grid-template-columns:76px minmax(60px,1fr) 76px;grid-template-rows:1fr 1fr;gap:10px;flex:1;min-height:260px} #bag-dialog .gear-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 0;border:0;text-align:center;min-width:0} #bag-dialog .gear-slot:nth-child(1){grid-column:1;grid-row:1} #bag-dialog .gear-slot:nth-child(2){grid-column:3;grid-row:1} #bag-dialog .gear-slot:nth-child(3){grid-column:3;grid-row:2} #bag-dialog .gear-slot>span{display:block;color:var(--gold);font-size:11px} #bag-dialog .gear-slot>div{display:grid;width:62px;height:62px;flex-shrink:0;margin:0;background:linear-gradient(145deg,#284c4c,#0b2028);border:1px solid #d1bd8077;box-shadow:inset 0 0 18px #0005;cursor:pointer} #bag-dialog .gear-slot .item-art{width:54px;height:54px} #bag-dialog .gear-slot p{font-size:10px;line-height:1.5;margin:0;min-height:15px} #bag-dialog .gear-slot button{font-size:10px;width:100%;padding:4px} #bag-dialog .character-pane{grid-column:1/-1;grid-row:1/3;border:0;min-height:0;z-index:0} #bag-dialog .gear-slot{z-index:1;align-self:center} #bag-dialog .preview-controls{position:static;gap:3px} #bag-dialog .preview-controls span{display:none} #bag-dialog .preview-controls button{padding:4px 8px} #bag-dialog #equipment-stat{padding-top:10px;border-top:1px solid #b6c69b33;margin:10px 0 0;color:var(--gold);font-size:12px} #bag-dialog .equipment-pane>.muted{display:block;font-size:10px;margin:8px 0 0} #bag-dialog .bag-items{grid-column:auto;grid-row:auto} #bag-dialog .inventory-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px} #bag-dialog .inventory-slot{border-color:#a7bca555;border-radius:4px} #bag-dialog .bag-grid-title{margin:2px 0 10px} #bag-dialog .bag-hint{margin:10px 0 0;font-size:11px;color:var(--muted);flex-shrink:0} :is(#bag-dialog,#npc-dialog) .bag-item-tooltip{position:absolute;z-index:15;pointer-events:none;white-space:pre-line;box-sizing:border-box;width:max-content;max-width:min(290px,calc(100% - 16px));max-height:calc(100% - 16px);overflow:hidden;padding:13px 16px;background:#09242af7;border:1px solid #d9c08a;border-radius:8px;color:#e7eee2;line-height:1.8;font-size:12px;box-shadow:0 6px 24px #0008} :is(#bag-dialog,#npc-dialog) .bag-item-tooltip::first-line{color:var(--gold);font-size:14px;font-weight:700} #bag-dialog .inventory-slot:focus-visible,#bag-dialog .gear-slot>div:focus-visible{outline:2px solid var(--gold);outline-offset:2px} @media(max-width:720px){ #bag-dialog{padding:14px;height:min(680px,96dvh);max-height:96dvh} #bag-dialog .bag-layout{grid-template-columns:minmax(210px,.8fr) minmax(220px,1.2fr);gap:10px} #bag-dialog .equipment-pane{padding:8px} #bag-dialog .equipment-board{grid-template-columns:58px minmax(40px,1fr) 58px;gap:4px} #bag-dialog .gear-slot>div{width:50px;height:50px} #bag-dialog .gear-slot .item-art{width:44px;height:44px} #bag-dialog .inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr))} #bag-dialog .bag-filters{gap:3px}#bag-dialog .bag-filters button{padding:5px;font-size:10px} } @media(max-width:500px){ #bag-dialog .bag-layout{grid-template-columns:1fr;grid-template-rows:190px minmax(150px,1fr);gap:10px;overflow:auto} #bag-dialog .equipment-pane{overflow:hidden} #bag-dialog .equipment-pane h3{margin-bottom:4px} #bag-dialog .equipment-board{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;min-height:0;gap:6px} #bag-dialog .gear-slot:nth-child(n){grid-column:auto;grid-row:1;padding:0;gap:2px} #bag-dialog .character-pane{display:none} #bag-dialog .equipment-pane>.muted{display:none} #bag-dialog #equipment-stat{margin-top:5px;padding-top:5px;font-size:11px} #bag-dialog .inventory-grid{grid-template-columns:repeat(5,minmax(0,1fr))} #bag-dialog .bag-summary{margin-bottom:8px}#bag-dialog h2{font-size:18px;margin-top:3px} } /* Center item names, attributes and instructions in both item tooltips. */ :is(#bag-dialog,#npc-dialog) .bag-item-tooltip{text-align:center} /* Reward feed and collapsible chat. */ #reward-lines{height:110px;overflow-y:auto;font-size:11px;line-height:1.6;overflow-wrap:anywhere;color:#e2d8b7} #reward-lines>div{padding:4px 0;border-bottom:1px solid #a3c2b51a} .chat-title{display:flex;align-items:center;gap:6px}.chat-title>span{margin-left:auto} #chat-hide{display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid #9cbdad66;border-radius:5px;background:#14353b;color:#e8d5a7;font-size:18px} #chat-restore{position:absolute;left:12px;bottom:145px;padding:7px 11px;border:1px solid #a6c5b277;border-radius:8px;background:#16383be8;color:#e8d5a7;font-size:11px} #chat-panel:not([hidden]){display:block} /* Consistent close controls, with a single focus border. */ dialog.panel>.close,#character-dialog>.close,#bag-dialog>.close{width:32px;height:32px;right:12px;top:12px;border:1px solid #92b5aa77;border-radius:8px;background:#173940;box-shadow:inset 0 1px 0 #c9e6d511;color:#d5e5dc;font-size:22px;line-height:1;padding:0;display:grid;place-items:center;outline:none} dialog.panel>.close:hover{background:#315653;color:#fff1ca;border-color:#d2be89} dialog.panel>.close:focus-visible,#character-dialog>.close:focus-visible{outline:none;border-color:#f0d598;box-shadow:0 0 0 2px #f0d59844} dialog.panel>h2{padding-right:34px} .class-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.class-options article{padding:18px;border:1px solid #70988b;border-radius:14px;background:#102e37}.class-options button{width:100%} #loading{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 25%,#345d58 0%,#142f35 48%,#0a1c25 100%);color:#f2e6c9;text-align:center;padding:24px}#loading[hidden]{display:none}.loading-card{width:min(440px,90vw)}.loading-card h1{font-family:Georgia,serif;font-size:clamp(36px,7vw,58px);letter-spacing:.16em;margin:20px 0 8px}.loading-subtitle{color:#b9cfc4;letter-spacing:.3em}.loading-emblem{font-size:64px;color:#dec18b;margin:26px auto;text-shadow:0 0 36px #dfbf8166}.loading-card h2{font-size:20px;font-weight:normal}.loading-card progress{display:block;width:100%;height:12px;border:1px solid #c4ad7555;border-radius:20px;overflow:hidden;background:#0b2329;accent-color:#b7c994}.loading-card progress::-webkit-progress-bar{background:#0b2329}.loading-card progress::-webkit-progress-value{background:linear-gradient(90deg,#729d8c,#e2c58d);border-radius:20px}.loading-card progress::-moz-progress-bar{background:#c7c291}#loading-status{color:#c1d4cc;min-height:24px}#loading-percent{font-size:13px;color:#ddc794}.loading-tip{font-size:12px;color:#91ada8;margin-top:36px}#loading-retry{padding:10px 22px;border:1px solid #d4bd84;border-radius:6px;background:#355c54;color:#f4e7cd} /* Account character lobby */ #character-selection{position:fixed;inset:0;z-index:45;overflow:auto;background:radial-gradient(ellipse at 49% 38%,#edf2dc 0,#cdded0 38%,#a1b8af 100%);color:#234542;padding:clamp(16px,3vw,44px);font-size:14px} #character-selection[hidden]{display:none}.roster-shell{max-width:1450px;margin:auto}.roster-header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.roster-header h1{font-size:clamp(28px,3vw,42px);margin:8px 0;letter-spacing:.02em}.roster-header p{margin:0;color:#526e65}#character-selection .eyebrow{color:#6c7252;letter-spacing:.17em;font-size:11px}#character-selection button{cursor:pointer;border:1px solid #64877d66;background:#f7f6eacc;color:#2b504a;border-radius:12px;padding:12px 18px;font:inherit}#character-selection button:hover{background:#fffaf0;border-color:#729687}#character-selection button:focus-visible,#character-selection input:focus-visible,#character-selection select:focus-visible{outline:3px solid #997843;outline-offset:3px}#character-selection button:disabled{cursor:default;opacity:.55}.roster-layout{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(260px,1.4fr) minmax(260px,1fr);gap:24px;align-items:stretch}.roster-list,.roster-details{background:#fffdf0bb;border:1px solid #fff9;border-radius:22px;padding:22px;box-shadow:0 12px 40px #3b635015}.roster-section-title h2,.roster-details h2{font-size:19px;margin:4px 0 10px}.roster-section-title>span{color:#72877a;font-size:12px}#roster-slots{display:grid;gap:12px;margin-top:20px}#character-selection .roster-slot{display:flex;text-align:left;gap:12px;align-items:center;padding:14px 12px;min-height:76px;border:1px solid #b7cabe;background:#f8f8ed}.roster-slot strong,.roster-slot small{display:block;overflow-wrap:anywhere}.roster-slot small{margin-top:5px;color:#708477;font-size:12px}.slot-emblem{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#e7ead5;color:#8c7952;font-size:24px}#character-selection .roster-slot[aria-pressed=true]{background:#315e54;color:#fff7df;box-shadow:0 5px 15px #315e5420;border-color:#315e54}.roster-slot[aria-pressed=true] small{color:#d5e2cf}.roster-note{line-height:1.8;color:#7a8879;font-size:12px;margin:20px 0 0}.roster-stage{position:relative;min-height:550px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.roster-orbit{position:absolute;width:95%;aspect-ratio:1;border:1px solid #ffffef88;border-radius:50%;box-shadow:0 0 0 28px #ffffef22,0 0 0 55px #ffffef11;pointer-events:none}.roster-stage-caption{position:absolute;top:20px;font-size:10px;letter-spacing:.22em;color:#6b8069}.roster-stage-name{text-align:center;z-index:1;margin-top:8px}.roster-stage-name h2{font-size:28px;margin:0;overflow-wrap:anywhere}.roster-stage-name p{color:#5e7b68}#roster-preview-slot{width:100%;height:420px;z-index:1}#roster-preview-slot .character-pane{height:100%;min-height:0;display:block;position:relative;border:0;background:transparent}#roster-preview-slot canvas{width:100%;height:calc(100% - 40px);display:block}#roster-preview-slot .preview-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:8px;align-items:center;font-size:11px;color:#698271}#roster-preview-slot .preview-controls button{padding:6px 14px}#roster-preview-status{position:absolute;top:45%;z-index:2;background:#f7f4e8;padding:12px;border-radius:10px}.roster-details h3{font-size:14px;margin:20px 0 8px}#roster-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}#roster-stats>div{padding:12px;background:#e5ecdf88;border-radius:12px}#roster-stats dt{font-size:11px;color:#748578}#roster-stats dd{margin:5px 0 0;font-size:15px;font-weight:600}#roster-equipment p{display:flex;gap:12px;justify-content:space-between;margin:0;padding:10px 0;border-bottom:1px solid #c7d2bd66;font-size:12px}#roster-equipment span{color:#748578}#roster-equipment strong{text-align:right}#character-selection .primary{background:#315e54;color:#fff6dd;border-color:#315e54}#character-selection .primary:hover{background:#244b43}#roster-enter{width:100%;margin-top:24px}#roster-status{font-size:12px;line-height:1.7;color:#856138;min-height:20px}#roster-create label{display:block;font-size:12px;margin:12px 0 6px}#roster-create input,#roster-create select{width:100%;padding:11px;background:#fffdf3;color:#294e44;border:1px solid #b2c7b5;border-radius:9px;font:inherit}.roster-create-actions{display:flex;gap:8px;margin-top:16px}.roster-create-actions .primary{flex:1}.roster-footer{display:flex;justify-content:space-between;gap:16px;margin-top:22px;font-size:11px;color:#506d5b;align-items:center}.roster-footer>div{display:flex;gap:12px;align-items:center}#character-selection .roster-footer button{padding:6px 12px;font-size:11px} @media(max-width:950px){.roster-layout{grid-template-columns:220px 1fr;gap:16px}.roster-details{grid-column:1/-1}.roster-stage{min-height:500px}.roster-details #roster-stats{grid-template-columns:repeat(3,1fr)}} @media(max-width:570px){.roster-header{align-items:flex-start;gap:12px}.roster-header p{font-size:12px}.roster-layout{grid-template-columns:1fr}.roster-stage{grid-row:1;min-height:420px}#roster-preview-slot{height:320px}.roster-stage-caption{top:0}#roster-slots{grid-template-columns:1fr 1fr}.roster-details{grid-column:auto}.roster-list,.roster-details{padding:16px}.roster-slot strong{font-size:12px}.slot-emblem{display:none}.roster-footer{align-items:flex-start;flex-direction:column}.roster-stage-name h2{font-size:23px}} /* Clear, theme-matched field states and character confirmations. */ #character-selection{color-scheme:light}#roster-stats dd{color:#284d46}#roster-create label{color:#45675b}#roster-create input:focus,#roster-create select:focus{border-color:#527d6c;box-shadow:0 0 0 2px #527d6c18}#character-selection input:focus-visible,#character-selection select:focus-visible{outline:none}#character-selection button:focus-visible{outline:2px solid #527d6c;outline-offset:3px}#character-selection .roster-delete{display:block;margin:12px auto 0;background:transparent;color:#9a5853;border-color:transparent;font-size:12px;padding:8px 14px}#character-selection .roster-delete:hover{background:#f4e3dc;border-color:#c58f84} #roster-confirm{color-scheme:light;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:32px;border:1px solid #e1e8d6;border-radius:24px;background:linear-gradient(145deg,#fffdf3,#edf2e5);color:#2a4f46;box-shadow:0 30px 100px #102e4160}#roster-confirm::backdrop{background:#163b3b80;backdrop-filter:blur(5px)}#roster-confirm .eyebrow{font-size:10px;letter-spacing:.17em;color:#788169}#roster-confirm-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#dce9d9;color:#648471;font-size:32px;margin:24px 0 16px}#roster-confirm h2{font-size:24px;margin:10px 0}#roster-confirm-description{font-size:14px;color:#688074;line-height:1.8}#roster-confirm-summary{margin:20px 0;padding:10px 16px;background:#fffaf0;border-radius:12px}#roster-confirm-summary>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0}#roster-confirm dt{color:#748476;font-size:12px}#roster-confirm dd{color:#254d42;margin:0;font-size:14px;text-align:right;overflow-wrap:anywhere}#roster-delete-check label{display:block;color:#6f6359;font-size:12px;margin:16px 0 8px}#roster-delete-name{width:100%;padding:12px;border:1px solid #c5cdb8;border-radius:10px;background:#fffdf7;color:#294d45;font:inherit}#roster-confirm input:focus{outline:2px solid #71917c;outline-offset:2px}#roster-confirm-error{min-height:20px;font-size:12px;color:#a3564e;line-height:1.6}.roster-confirm-actions{display:flex;gap:10px;margin-top:20px}.roster-confirm-actions button{flex:1;padding:12px 10px;border:1px solid #b4c9b7;background:#fffaf0;color:#406350;border-radius:10px;font:inherit;font-size:13px;cursor:pointer}#roster-confirm-submit{background:#315e54;border-color:#315e54;color:#fff6dd}#roster-confirm[data-kind=delete] #roster-confirm-submit{background:#a35e57;border-color:#a35e57}#roster-confirm[data-kind=delete] #roster-confirm-icon{background:#f0dfd8;color:#a76e65}.roster-confirm-actions button:disabled{opacity:.5;cursor:wait}.roster-confirm-actions button:focus-visible{outline:2px solid #527d6c;outline-offset:3px} .roster-appearance-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.roster-appearance-fields label{color:#45675b;font-size:12px}.roster-appearance-fields select{width:100%;display:block;margin-top:6px;padding:10px 6px;background:#fffdf3;color:#294e44;border:1px solid #b2c7b5;border-radius:9px;font:inherit}#roster-appearance select:focus{border-color:#527d6c;box-shadow:0 0 0 2px #527d6c18}.roster-appearance-note{font-size:11px;color:#6a8072;line-height:1.6}#roster-appearance-actions{display:flex;gap:8px}#character-selection #roster-appearance-actions button{font-size:11px;padding:9px}#character-selection #roster-appearance-save{background:#315e54;color:#fff6dd} /* Native popup options must not inherit the dark game menu background. */ #character-selection select option,#roster-confirm select option{background:#fffdf3;color:#284d46} #character-selection select option:checked{background:#dce9d9;color:#183f35} /* Nameplates anchor at the projected head center. */ #labels .label{text-align:center;width:max-content;max-width:260px;transform:translate(-50%,-100%)} #labels .mob-name{display:block;text-align:center} #player-inspection{width:min(860px,94vw);max-height:92dvh;padding:24px;border:1px solid #ddcf9e;border-radius:26px;background:radial-gradient(ellipse at 25% 45%,#e6edda,#c9dcd1 65%,#aac6bd);color:#294d46;box-shadow:0 28px 100px #061e3670;color-scheme:light;overflow:auto}#player-inspection::backdrop{background:#08252c99;backdrop-filter:blur(5px)}#player-inspection header{display:flex;justify-content:space-between;align-items:center}#player-inspection .eyebrow{color:#778062;font-size:10px}#player-inspection button{background:#faf8e9;color:#315d52;border:1px solid #aabfa7;border-radius:12px;padding:8px 15px}#player-inspection button:focus-visible{outline:2px solid #357762;outline-offset:3px}.inspect-close{font-size:23px}.inspect-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}.inspect-stage{overflow:hidden;min-width:0;position:relative;min-height:480px;background:radial-gradient(ellipse at center,#f5f6dd70 10%,#c1d7c500 65%);border-radius:50%;border:1px solid #fff8db55}.inspect-stage canvas{position:relative;display:block;width:100%;height:470px;touch-action:none;z-index:1}.inspect-loading{position:absolute;top:40%;left:10%;width:80%;text-align:center;font-size:13px}.inspect-rotate{position:relative;display:flex;gap:12px;align-items:center;justify-content:center;z-index:2;margin-bottom:14px}.inspect-rotate span{font-size:11px;color:#56766a}.inspect-details{min-width:0;align-self:center;padding:25px;background:#fffdf0bb;border:1px solid #fffceb;border-radius:20px}.inspect-details h2{margin:10px 0;font-size:28px;overflow-wrap:anywhere}.inspect-class{font-size:13px;color:#607e6c}.inspect-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inspect-stats>div{padding:12px;background:#dce6d880;border-radius:12px}.inspect-details dt{font-size:11px;color:#617868}.inspect-details dd{color:#294d46;margin:5px 0 0;font-weight:bold;font-size:15px}.inspect-details h3{font-size:14px;margin-top:24px}.inspect-gear>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #c9d7bb;padding:10px 0}.inspect-gear dd{font-size:12px;text-align:right;max-width:70%;margin:0}.inspect-status{font-size:11px;color:#70856c;margin:22px 0 0}@media(max-width:650px){.inspect-layout{grid-template-columns:1fr}.inspect-stage{min-height:340px}.inspect-stage canvas{height:330px}.inspect-details{padding:18px}} #player-inspection .inspect-gear{display:block}#player-inspection .inspect-stats>div{min-width:0}#player-inspection dd{overflow-wrap:anywhere} #player-context-menu{position:fixed;z-index:80;width:225px;max-width:calc(100vw - 16px);padding:10px;border:1px solid #c8b983;border-radius:16px;background:linear-gradient(140deg,#fffbe9,#dbeadf);color:#294d46;box-shadow:0 12px 35px #071f3055;color-scheme:light} #player-context-menu .player-menu-name{display:block;padding:6px 10px 10px;overflow-wrap:anywhere;border-bottom:1px solid #bacdbc;margin-bottom:5px} #player-context-menu button{display:block;width:100%;text-align:left;padding:11px 10px;background:transparent;color:#294d46;border:0;border-radius:8px;font-size:14px} #player-context-menu button:hover,#player-context-menu button:focus-visible{background:#c6ddcd;outline:2px solid #608c76;outline-offset:-2px} #city-load-status{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:10000;background:#183c36e8;color:#fff1c9;padding:9px 18px;border:1px solid #bca979;border-radius:10px;pointer-events:none;font-size:13px}#city-load-status[hidden]{display:none} /* v0.1.101: compact top-left location header and fixed fifth skill. */ #hud #player-panel{left:8px;top:8px;width:286px;padding:10px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px} #hud #player-panel .zone{position:static;transform:none;grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;width:auto;margin:0;border-bottom:1px solid #e4d9b62a;padding-bottom:6px} #hud #player-panel .zone .eyebrow{display:block;grid-column:1/-1;font-size:9px;letter-spacing:2px} #hud #player-panel .zone h2{font-size:14px;line-height:1.4;margin:0} #hud #player-panel #connection{font-size:9px;align-self:center;white-space:nowrap} #hud #player-panel .portrait{width:46px;height:46px} #hud .bottom{width:415px} .skill[data-action-state=active]{border-color:#8bdfba;background:#2a5c53} .skill[data-action-state=active]>span{opacity:1!important} .skill[data-action-state=active] em{color:#c5ffe6;font-size:11px;background:#1b4744b8} .skill[data-action-state=level] em{font-size:10px;color:#f1d59e} @media(max-width:750px){#hud #player-panel{width:250px;max-width:calc(100vw - 24px)}#hud .bottom{max-width:calc(100vw - 12px)}} /* Location text floats directly over the world, above the player panel. */ #hud>.zone{position:absolute;left:12px;right:auto;top:8px;transform:none;text-align:left;width:286px;margin:0;padding:0;background:none;border:0;box-shadow:none;pointer-events:none;text-shadow:0 2px 4px #142f36,0 0 8px #142f3680} #hud>.zone .eyebrow{display:block;font-size:10px;letter-spacing:2px;color:#ffe0a2} #hud>.zone h2{margin:3px 0 2px;font-size:17px;line-height:1.3;color:#f4fff4} #hud>.zone #connection{font-size:10px;color:#dbece7} #hud #player-panel{top:82px} @media(max-width:750px){#hud>.zone{width:250px;max-width:calc(100vw - 24px);top:6px}#hud>.zone h2{font-size:15px}#hud #player-panel{top:78px}} /* Portrait and connection status share the character/metrics HUD respectively. */ #hud #player-panel{top:62px} #hud #player-panel .portrait{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 30%,#b0c8ad,#3b6662 78%)} #player-portrait{width:100%;height:100%;display:block;object-fit:contain} #player-portrait[hidden]{display:none} #portrait-placeholder{position:absolute;inset:0;display:grid;place-items:center} #portrait-placeholder[hidden]{display:none} #hud .runtime-status #connection{font-size:inherit;color:#dbece7;white-space:nowrap} @media(max-width:750px){#hud #player-panel{top:56px}} /* v0.1.127 — jade and gold relief HUD. Scoped to gameplay controls. */ #hud{--hud-gold:#bf8841;--hud-gold-light:#fff0ba;--hud-shadow:#183c32;--hud-cream:#fff6dc} #hud #player-panel{left:10px;top:62px;width:365px;max-width:calc(100vw - 28px);padding:4px;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center;background:none;border:0;box-shadow:none;backdrop-filter:none} #hud .portrait-frame{position:relative;width:86px;height:86px;padding:7px;border:1px solid #704823;border-radius:50%;background:conic-gradient(from -30deg,#fff9d4,#e1b967 20%,#95632e 40%,#f2d08a 58%,#fff8d1 77%,#bd8847 94%,#fff9d4);box-shadow:0 3px 0 #77522c,0 5px 9px #16362d66,inset 0 0 0 2px #fff2c7,inset 0 0 0 4px #ad7a3e} #hud .portrait-frame::before{content:"";position:absolute;inset:4px;border:1px solid #805631;border-top-color:#fffbe0;border-left-color:#fff0b7;border-radius:50%;pointer-events:none;z-index:2} #hud .portrait-frame::after{content:"";position:absolute;right:0;bottom:4px;width:14px;height:14px;transform:rotate(45deg);border:2px solid #f5d890;border-radius:4px;background:linear-gradient(135deg,#dcfff2,#4fbd95 42%,#187256 52%,#8ae6b8);box-shadow:1px 2px 0 #6c4e25,0 0 0 1px #886832;pointer-events:none;z-index:3} #hud #player-panel .portrait{width:100%;height:100%;border:2px solid #785d37;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 45% 30%,#eaf5cf,#86b9a0 54%,#315e54);box-shadow:inset 0 2px 6px #123d4470,inset 0 -2px 0 #fffbd599} #hud #player-portrait{position:relative;z-index:1;filter:drop-shadow(0 2px 1px #1f493877)} #hud .player-info{min-width:0;align-self:center;padding:3px 0} #hud .player-name{gap:10px;align-items:center;margin-bottom:7px} #hud #player-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;color:#fffce9;text-shadow:0 2px 2px #203d2c,1px 0 #203d2c,-1px 0 #203d2c,0 -1px #203d2c} #hud #level{flex:none;min-width:58px;padding:3px 10px;text-align:center;border:1px solid #8f5d27;border-radius:12px;background:linear-gradient(#fff7d3 0%,#ffdf87 48%,#e8ad4e 52%,#f8ce75 100%);box-shadow:inset 0 1px 0 #fffef0,0 2px 0 #8f6634,0 3px 5px #153b3044;color:#68441e;font-size:12px;font-weight:700;text-shadow:0 1px #fff4c7} #hud #player-panel .meter{height:18px;margin:5px 0;border:1px solid #5b6f47;border-radius:10px;background:linear-gradient(#233e35,#3b5140);box-shadow:0 1px 0 #fff3c6bb,inset 0 2px 4px #092821b3;isolation:isolate} #hud #player-panel .meter i{border-radius:inherit;box-shadow:inset 0 1px 0 #ffffffa6,inset 0 -2px 2px #173f4344} #hud #player-panel .meter.hp i{background:linear-gradient(180deg,#c8ffe4 0%,#75e7aa 24%,#36c985 48%,#1da268 53%,#5bdd99 100%)} #hud #player-panel .meter.mp i{background:linear-gradient(180deg,#e0fbff 0%,#9ce4ff 24%,#58bce8 48%,#3294c9 53%,#75d3ef 100%)} #hud #player-panel .meter::after{content:"";position:absolute;inset:1px 0;z-index:1;border-radius:inherit;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#154e3b24 calc(10% - 1px),#154e3b24 10%);pointer-events:none} #hud #player-panel .meter span{z-index:2;font-size:11px;font-weight:bold;line-height:16px;text-shadow:0 1px 2px #164533,0 -1px 1px #164533;font-variant-numeric:tabular-nums} #hud #player-panel .mp span{text-shadow:0 1px 2px #164366,0 -1px 1px #164366} #hud #health-warning{color:#ffe0cf;text-shadow:0 1px 2px #742f24;font-weight:bold} #hud>.zone{left:14px;top:10px} #hud>.zone .eyebrow{color:#ffe6a7;text-shadow:0 1px 2px #3e5937;letter-spacing:2.2px} #hud>.zone h2{color:#fff9de;font-weight:bold;text-shadow:0 2px 2px #2c4d38} /* Enamel medallions: highlight, gold lip, recessed illustration, cast shadow. */ #hud .side-menu{right:8px;bottom:18px;width:66px;padding:3px;align-items:center} #hud #side-menu-items{width:66px;padding:3px 6px 6px;max-height:calc(100dvh - 360px);scrollbar-width:thin;scrollbar-color:#d4b476 #244f4640} #hud .side-adventure,#hud .side-system{gap:9px} #hud .side-system{margin-top:12px;padding-top:11px;border-top:1px solid #f4dca45c} #hud .side-menu #side-menu-items button{position:relative;inset:auto;margin:0;transform:none;width:52px;height:52px;min-height:52px;padding:4px;border:1px solid #916534;border-radius:50%;background:radial-gradient(ellipse at 32% 18%,#fffef0 0%,#f7efce 28%,#d5e8ce 60%,#91bda5 100%);box-shadow:inset 0 0 0 2px #fff5ce,inset 0 0 0 4px #c89d59,0 3px 0 #765733,0 5px 8px #193c3f55;transition:transform .14s ease,filter .14s ease;overflow:visible} #hud .side-menu #side-menu-items button::before{width:36px;height:36px;filter:drop-shadow(0 2px 1px #31544255);background-size:contain} #hud .side-menu #side-menu-items button::after{content:"";position:absolute;inset:4px;border-radius:50%;border-top:1px solid #fffef0c9;box-shadow:inset 0 -2px 3px #47644b25;pointer-events:none} #hud .side-menu #side-menu-items button:hover{transform:translateY(-2px);filter:brightness(1.07)} #hud .side-menu #side-menu-items button:active{transform:translateY(1px);box-shadow:inset 0 0 0 2px #f8e8b8,inset 0 0 0 4px #bc965c,0 1px 0 #765733,0 2px 4px #193c3f44} #hud #menu-toggle{width:58px;height:58px;line-height:48px;margin-top:11px;border:1px solid #92703b;background:radial-gradient(circle at 28% 18%,#fffef1 0%,#fff0b6 42%,#ddb265 80%,#bf8a44);color:#96632c;box-shadow:inset 0 0 0 2px #fff8da,inset 0 0 0 4px #dfb772,0 3px 0 #846333,0 5px 9px #193c3f55;text-shadow:0 1px #ffffe4;font-size:35px;transition:transform .14s} #hud #menu-toggle:active{transform:translateY(2px)} #menu-tooltip{border-color:#dfbd77;background:linear-gradient(135deg,#244b40f5,#122f2ef5);color:#fff2d1;box-shadow:inset 0 1px #fff0c133,0 4px 12px #001b2466;border-radius:9px} /* Hotbar uses the same bevels while keeping cooldowns and key labels prominent. */ #hud .bottom{width:458px} #hud .actionbar{gap:7px;padding:10px 13px;border:1px solid #a78449;border-radius:18px;background:linear-gradient(180deg,#47776cf0 0%,#244e46ed 45%,#183c35f2 100%);box-shadow:inset 0 1px 0 #ffeabc99,inset 0 0 0 3px #c5a15c38,0 3px 0 #826238,0 7px 16px #0d282957;backdrop-filter:blur(9px)} #hud .actionbar .skill,#hud .actionbar .meditate-action{flex:0 0 49px;width:49px;height:49px;border:1px solid #b38c4e;border-radius:11px;background:radial-gradient(ellipse at 40% 15%,#83b2a0,#3f8174 48%,#23574f 78%,#16443e);box-shadow:inset 0 1px 0 #fff5bcb3,inset 0 0 0 2px #153f3977,0 2px 0 #102f28;transition:transform .12s ease,filter .12s ease} #hud .actionbar .skill::before,#hud .actionbar .meditate-action::before{content:"";position:absolute;inset:2px 3px auto;height:43%;border-radius:8px 8px 50% 50%;background:linear-gradient(#e7ffed35,transparent);pointer-events:none} #hud .actionbar .skill>span,#hud .actionbar .meditate-action>span{position:relative;color:#ffe2a1;text-shadow:0 2px 0 #725428,0 3px 4px #082b2e;font-size:25px} #hud .actionbar .potion>span{color:#ffd9ce;text-shadow:0 2px 0 #953951,0 3px 4px #082b2e} #hud .actionbar .skill kbd,#hud .actionbar .meditate-action kbd{z-index:4;left:3px;top:3px;min-width:12px;padding:1px 3px;line-height:11px;border-radius:3px;background:#153d35c2;color:#fff6d4;font-size:9px;text-shadow:none;box-shadow:inset 0 1px #cfe7c73d} #hud .actionbar .skill em{z-index:3;border-radius:inherit;background:#082d29bd;color:#fff2cf;font-weight:bold;text-shadow:0 1px 2px #12261e} #hud .actionbar .skill[data-action-state=active]{background:radial-gradient(ellipse at 40% 15%,#b4edb5,#438b66 65%,#235d48);border-color:#ffe7a0;box-shadow:inset 0 1px 0 #fff3c8,inset 0 0 0 2px #8bca9077,0 0 8px #98e5b34d} #hud .actionbar .skill[data-action-state=active] em{background:#194b376e} #hud .actionbar .meditate-action[aria-pressed=true]{border-color:#ffdda1;box-shadow:inset 0 0 10px #c6ffc585,0 0 8px #88dcac55} #hud .actionbar .skill:hover,#hud .actionbar .meditate-action:hover{transform:translateY(-2px);filter:brightness(1.12)} #hud .actionbar .skill:active,#hud .actionbar .meditate-action:active{transform:translateY(1px)} #hud .currency{min-width:70px;font-size:13px;color:#ffe6ab;text-shadow:0 1px 2px #092e24} #hud .currency>span{width:17px;height:17px;display:grid;place-items:center;border:1px solid #b08338;border-radius:50%;background:linear-gradient(135deg,#fff4af,#e5b74c 50%,#b07923);color:#906225;box-shadow:inset 0 0 0 1px #ffeac4,0 2px 2px #103e3088;text-shadow:0 1px #ffeca1;font-size:12px} #hud .currency small{color:#d6e9cd;margin-top:3px} #hud #hotbar-settings,#hud #chat-restore{border:1px solid #bc995b;background:linear-gradient(#436b59,#244c40);color:#ffe7b3;box-shadow:inset 0 1px #fff0c23b,0 2px 3px #173c3655;border-radius:9px} #hud>.exp{border-top:1px solid #a58b4c;background:#15372d} #hud>.exp i{background:linear-gradient(180deg,#fff2ad,#d7b65f 45%,#98b66a);box-shadow:inset 0 1px #ffffdba8} #hud .runtime-status{left:12px;bottom:calc(17px + env(safe-area-inset-bottom));max-width:calc(50vw - 250px);padding:5px 11px;gap:3px 9px;border:1px solid #c9ac6259;border-radius:18px;background:linear-gradient(#365d45d9,#234736eb);box-shadow:inset 0 1px 0 #fff4c326,0 3px 7px #0b2e3244;color:#f4f0d8;font-size:10px} #hud .runtime-status #fps-status{color:#b3f5c0} #hud .runtime-status #ping-status{color:#d2f8d4} #hud .runtime-status #connection{color:#e5edcc} #hud .runtime-status #save-state{color:#cfdfc4} #hud #chat-panel{border-color:#c4a36766;border-radius:13px;background:linear-gradient(150deg,#2c5347b0,#163d37c2);box-shadow:inset 0 1px #fff0b82b,0 5px 14px #122e3440} #hud #chat-panel .chat-title{color:#ffe1a1} #hud #chat-panel .chat-tabs button{border-radius:6px;border-color:#b59a6759} #hud #chat-panel .chat-tabs button[aria-pressed=true]{color:#fff0bf;background:linear-gradient(#6d9470,#426750);border-color:#d8bd81;box-shadow:inset 0 1px #f9efc84d} #hud .map.panel{border-color:#c2a360aa;border-radius:15px;background:linear-gradient(145deg,#345f53f0,#183c36f0);box-shadow:inset 0 0 0 3px #c6a96620,0 4px 10px #102f3b44} #hud #minimap{border:1px solid #c9b87a88;border-radius:8px} #hud button:focus-visible{outline:2px solid #fff0b7;outline-offset:4px} @media(max-width:900px){#hud .runtime-status{bottom:calc(100px + env(safe-area-inset-bottom));max-width:calc(100vw - 100px)}} @media(max-width:750px){ #hud #player-panel{top:56px;left:8px;width:335px;grid-template-columns:72px minmax(0,1fr);gap:9px} #hud .portrait-frame{width:72px;height:72px;padding:6px} #hud #player-name{font-size:14px}#hud #level{min-width:53px;padding:2px 8px;font-size:11px} #hud #player-panel .meter{height:17px;margin:4px 0}#hud #player-panel .meter span{line-height:15px;font-size:10px} #hud .side-menu{top:160px;bottom:22px;right:4px;width:62px;justify-content:flex-end} #hud #side-menu-items{max-height:none;flex:0 1 auto;width:62px;padding:3px 5px 6px} #hud .side-menu #side-menu-items button{width:48px;height:48px;min-height:48px} #hud .side-menu #side-menu-items button::before{width:33px;height:33px} #hud #menu-toggle{width:52px;height:52px;font-size:32px;line-height:44px} #hud .side-adventure,#hud .side-system{gap:8px} } @media(max-width:620px){ #hud .bottom{width:394px;max-width:calc(100vw - 14px)}#hud .actionbar{padding:8px 7px;gap:5px;border-radius:15px} #hud .actionbar .skill,#hud .actionbar .meditate-action{flex-basis:42px;width:42px;height:44px;border-radius:9px} #hud .currency{min-width:57px;font-size:11px} #hud .actionbar .skill>span,#hud .actionbar .meditate-action>span{font-size:22px} #hud .side-menu{bottom:92px}#hud .runtime-status{font-size:9px;padding:4px 9px} } @media(max-width:380px){ #hud #player-panel{grid-template-columns:62px minmax(0,1fr);gap:8px;width:310px}#hud .portrait-frame{width:62px;height:62px;padding:5px} #hud #player-name{font-size:13px}#hud #level{min-width:47px;font-size:10px;padding:2px 6px} #hud .actionbar{gap:3px;padding:7px 5px}#hud .actionbar .skill,#hud .actionbar .meditate-action{flex-basis:36px;width:36px;height:40px}#hud .currency{min-width:48px;font-size:10px} } @media(max-height:520px){#hud .side-menu{top:80px;bottom:92px}#hud #side-menu-items{max-height:none;flex:0 1 auto}#hud #menu-toggle{width:44px;height:44px;line-height:34px;margin-top:8px}#hud .side-menu #side-menu-items button{width:42px;height:42px;min-height:42px}#hud .side-menu #side-menu-items button::before{width:29px;height:29px}} @media(prefers-reduced-motion:reduce){#hud .side-menu button,#hud .actionbar button,#hud #menu-toggle{transition:none}#hud .side-menu button:hover,#hud .actionbar button:hover{transform:none}} #hud .right-stack .quest-card{top:170px} /* v0.1.127 — anchored HUD layout, normal-flow menu and readable sprint icon. */ #hud>.zone{left:auto;right:8px;top:6px;width:208px;max-width:calc(100vw - 24px);text-align:right} #hud>.zone h2{margin:3px 0 0} #hud #player-panel{top:8px;left:8px} #hud .right-stack{top:58px;right:8px} #hud .right-stack .quest-card{top:114px} #hud .side-menu{top:300px;bottom:18px;right:4px;width:76px;padding:0;justify-content:flex-end} #hud #side-menu-items{width:76px;min-height:0;max-height:100%;flex:0 1 auto;padding:4px 9px 8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain} #hud .side-adventure,#hud .side-system{width:100%;display:flex;flex-direction:column;align-items:center;gap:9px} #hud .side-system{margin-top:10px;padding-top:10px} #hud .side-menu #side-menu-items button{inset:auto;margin:0;flex-shrink:0} #hud #menu-toggle{flex-shrink:0;margin-top:8px} /* Content-sized currency column: the coin never shares space with its amount. */ #hud .bottom{width:max-content;max-width:calc(100vw - 16px)} #hud .actionbar{flex-wrap:nowrap;justify-content:flex-start} #hud .actionbar .currency{flex:0 0 auto;min-width:82px;max-width:160px;grid-template-columns:17px minmax(0,1fr);column-gap:6px;row-gap:2px;align-items:center;margin-right:5px} #hud .currency #gold{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;line-height:20px} #hud .currency small{grid-column:1 / -1;text-align:center;margin:0;line-height:12px} #hud .actionbar #sprint>.sprint-icon{display:block;width:34px;height:34px;margin:5px auto 0;background:url(/assets/skills/sprint.svg?v=0.1.127) center/contain no-repeat;filter:drop-shadow(0 2px 1px #102f35);font-size:0;line-height:1} /* Chat and metrics share one flow, including when text wraps or chat is folded. */ #hud .hud-social{position:absolute;left:8px;bottom:calc(17px + env(safe-area-inset-bottom));width:clamp(260px,calc(50vw - 265px),360px);display:flex;flex-direction:column;align-items:stretch;gap:8px;pointer-events:none} #hud .hud-social #chat-panel{position:static;width:100%;margin:0;padding:12px;min-height:0;max-height:40dvh;overflow:auto;pointer-events:auto} #hud .hud-social .runtime-status{position:static;left:auto;bottom:auto;width:fit-content;max-width:100%;margin:0;flex:none;gap:3px 8px} #hud .hud-social #save-state{flex-basis:auto} #hud .hud-social #chat-restore{position:static;align-self:flex-start;pointer-events:auto} #hud .hud-social #chat-lines,#hud .hud-social #combat-lines,#hud .hud-social #reward-lines{height:110px;max-height:18dvh;overflow-y:auto;overflow-wrap:anywhere} #hud .hud-social #chat-input{min-width:0} @media(max-width:1100px){ #hud .hud-social{bottom:calc(102px + env(safe-area-inset-bottom));width:340px;max-width:calc(100vw - 90px)} } @media(max-width:750px){ #hud>.zone{top:6px;right:8px;width:160px;max-width:38vw} #hud>.zone .eyebrow{font-size:8px;letter-spacing:1px} #hud>.zone h2{font-size:13px;overflow-wrap:anywhere} #hud #player-panel{top:6px;width:min(335px,calc(100vw - 180px));max-width:calc(100vw - 180px)} #hud .side-menu{top:100px;bottom:92px;width:72px} #hud #side-menu-items{width:72px;max-height:100%;padding-inline:9px} } @media(max-width:620px){ #hud .actionbar .currency{position:absolute;left:6px;bottom:calc(100% + 6px);min-width:84px;max-width:180px;margin:0;padding:3px 8px;border:1px solid #b49558;border-radius:9px;background:#244e46f2;font-size:11px} #hud .currency small{display:none} #hud .actionbar #sprint>.sprint-icon{width:30px;height:30px;margin-top:5px} #hud .hud-social{width:320px} } @media(max-width:500px){ #hud #player-panel{width:calc(100vw - 160px);max-width:calc(100vw - 160px);grid-template-columns:54px minmax(0,1fr);gap:6px;padding:2px} #hud .portrait-frame{width:54px;height:54px;padding:5px} #hud .portrait-frame::after{width:10px;height:10px;bottom:1px} #hud #player-name{font-size:12px}#hud .player-name{gap:4px;margin-bottom:4px} #hud #level{min-width:39px;padding:2px 4px;font-size:9px} #hud #player-panel .meter{height:15px;margin:4px 0}#hud #player-panel .meter span{font-size:9px;line-height:13px} #hud>.zone{max-width:136px;width:136px} } @media(max-height:520px){ #hud .side-menu{top:80px;bottom:92px} #hud .hud-social #chat-panel{max-height:calc(100dvh - 225px);padding:8px} #hud .hud-social #chat-lines,#hud .hud-social #combat-lines,#hud .hud-social #reward-lines{height:48px} } /* Death countdown stays below the scene focus; it never blocks the camera. */ #hud #death-status{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);width:260px;max-width:calc(100vw - 32px);padding:13px 20px;display:grid;gap:5px;text-align:center;border:1px solid #cfb58499;border-radius:12px;background:linear-gradient(#382c35e8,#1e3038ee);box-shadow:0 5px 18px #10252a55;pointer-events:none} #death-status strong{color:#ffe0c5;font-size:17px}#death-countdown{color:#fff0cf;font-size:14px;font-variant-numeric:tabular-nums}#death-status small{color:#c3d3ce;font-size:11px} #hud .actionbar .skill[data-action-state=dead] em{font-size:10px} @media(max-width:750px){#hud #death-status{bottom:auto;top:110px;width:230px;padding:9px 12px}} /* v0.1.127 — warm parchment, gold bevels, fixed headers and separate scrolling. */ :is(#bag-dialog,#npc-dialog,#character-dialog,#bestiary-dialog,#quest-journal-dialog,#world-map-dialog,#help-dialog,#sound-dialog,#hotbar-dialog,#craft-confirm,#buy-confirm,#sell-confirm,#roster-confirm,#player-inspection).menu-window{ --ink:#4b351f;--muted:#836643;--gold:#9c621d;--jade:#39785c;--paper:#fff9e7;--line:#e1bd79; color-scheme:light;color:var(--ink);padding:0;gap:0;overflow:hidden;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px); border:1px solid #ad7837;border-radius:22px;background:linear-gradient(130deg,#fff9e7,#fff5d9 65%,#fbe9bf); box-shadow:inset 0 0 0 2px #fff8dc,inset 0 0 0 5px #e6bf7755,0 5px 0 #9e6e3c,0 8px 0 #fff1c933,0 22px 65px #172c3b70; backdrop-filter:none;text-align:left;font-size:14px;line-height:1.6; } dialog.menu-window[open]{display:flex;flex-direction:column;animation:menu-arrive .18s ease-out} dialog.menu-window::backdrop{background:#152c354d;backdrop-filter:blur(3px)} @keyframes menu-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}} dialog.menu-window .menu-header{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:13px;min-height:76px;margin:0;padding:14px 20px;border-bottom:1px solid #d4aa61;border-radius:21px 21px 0 0;background:linear-gradient(#ffefbf,#f6dca1);box-shadow:inset 0 2px 0 #fffbe5,0 2px 0 #fffdf0;z-index:20} dialog.menu-window .menu-emblem{width:42px;height:42px;flex:none;filter:drop-shadow(0 2px 1px #9b682d66)} dialog.menu-window .menu-title{flex:1;min-width:0} dialog.menu-window .menu-title .eyebrow{display:block;color:#986629;font-size:9px;letter-spacing:.14em;line-height:1.4} dialog.menu-window .menu-title :is(h2,strong){display:block;margin:3px 0 0;padding:0;font-family:inherit;font-weight:700;font-size:21px;line-height:1.4;color:#51361c;text-shadow:0 1px #fff9de;overflow-wrap:anywhere} dialog.menu-window .menu-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding:24px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#d3a864 #fff2ce;scroll-padding-block:12px} dialog.menu-window :is(.menu-body,.bag-scroll,.equipment-pane)::-webkit-scrollbar{width:9px;height:9px} dialog.menu-window :is(.menu-body,.bag-scroll,.equipment-pane)::-webkit-scrollbar-track{background:#f8e9c6;border-radius:9px} dialog.menu-window :is(.menu-body,.bag-scroll,.equipment-pane)::-webkit-scrollbar-thumb{background:#d5ab6a;border:2px solid #f8e9c6;border-radius:9px} dialog.menu-window h3{font-size:16px;font-weight:700;color:#945b1e;margin:14px 0 12px} dialog.menu-window :is(p,dd,dt,strong,span){overflow-wrap:anywhere} dialog.menu-window .muted{color:var(--muted);font-size:12px;line-height:1.7} dialog.menu-window :is(label,dt){color:#82613c} dialog.menu-window dd{color:#51361f} dialog.menu-window .eyebrow{color:#986629} dialog.menu-window button{min-height:36px;padding:8px 14px;color:#66431e;border:1px solid #c58e42;border-radius:11px;background:linear-gradient(#fffef5,#fff1cc);box-shadow:inset 0 1px 0 #fff,0 3px 0 #c39150,0 4px 7px #b9883920;transition:background .14s,box-shadow .14s,transform .14s;font-weight:600;line-height:1.45;touch-action:manipulation} dialog.menu-window button:not(:disabled):hover{background:linear-gradient(#fffefa,#ffe9b0);border-color:#ac7330;box-shadow:inset 0 1px #fff,0 3px 0 #b7803c,0 5px 10px #bc8a4033;filter:none} dialog.menu-window button:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px #fff,0 1px 0 #b7803c} dialog.menu-window button:disabled{opacity:.5;filter:saturate(.45);box-shadow:inset 0 1px #fff,0 1px 0 #c9b797;transform:none} dialog.menu-window :is(button,input,select):focus-visible{outline:3px solid #408368;outline-offset:3px} /* Higher specificity replaces old absolute close styles, including character view. */ :is(#bag-dialog,#npc-dialog,#character-dialog,#bestiary-dialog,#quest-journal-dialog,#world-map-dialog,#help-dialog,#sound-dialog,#hotbar-dialog,#craft-confirm,#buy-confirm,#sell-confirm,#roster-confirm,#player-inspection).menu-window .menu-header .menu-close{position:static;inset:auto;flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;margin:0;border:1px solid #bb803a;border-radius:12px;background:linear-gradient(#fffdf1,#f7d997);color:#835222;font:28px/1 Tahoma,sans-serif;box-shadow:inset 0 1px #fff,0 3px 0 #b57e3d,0 4px 7px #b988392b} dialog.menu-window .menu-header .menu-close:hover{color:#9e492a;background:linear-gradient(#fffef4,#ffe3b1)} dialog.menu-window :is(input,select){min-height:42px;padding:9px 12px;color:#51371f;background:#fffcf1;border:1px solid #d8b581;border-radius:10px;box-shadow:inset 0 2px 4px #b7893820} dialog.menu-window select option{background:#fffcf1;color:#51371f} dialog.menu-window input::placeholder{color:#9a825e} dialog.menu-window input[type=checkbox]{accent-color:#438365;width:18px;min-height:18px} dialog.menu-window input[type=range]{accent-color:#b98332;box-shadow:none;background:transparent;cursor:pointer} dialog.menu-window :is(.primary,button[aria-pressed=true],.hotbar-tile.drop-target){color:#634016;background:linear-gradient(#ffe9a3,#ffc85b);border-color:#b97d27;box-shadow:inset 0 1px #fff5cf,0 3px 0 #bc8330,0 4px 7px #b9883930} dialog.menu-window :is(.primary,button[aria-pressed=true]):not(:disabled):hover{background:linear-gradient(#fff0bd,#ffd574)} dialog.menu-window .primary{justify-content:center;gap:10px} dialog.menu-window :is(.bag-filters,.vendor-tabs,.character-tabs){display:flex;flex-wrap:wrap;gap:9px;padding:0 0 14px;margin:0 0 18px;border-bottom:1px solid #e4c88d} dialog.menu-window :is(.bag-filters,.vendor-tabs,.character-tabs) button{padding:8px 15px;flex:0 1 auto;font-size:12px;border-radius:10px} /* Inventory and equipment: recessed slots inside softly raised paper panels. */ #bag-dialog.menu-window{width:min(1080px,96vw);height:min(730px,calc(100dvh - 40px))} #bag-dialog.menu-window>.menu-body{display:flex;flex-direction:column;overflow:hidden;gap:12px} #bag-dialog.menu-window .bag-summary{margin:0;padding:0 2px 10px;border-bottom:1px solid #e4c88d;font-size:14px;flex-shrink:0} #bag-dialog.menu-window .bag-layout{gap:20px;grid-template-columns:minmax(310px,.95fr) minmax(320px,1.3fr)} #bag-dialog.menu-window .equipment-pane{padding:18px;border:1px solid #e0be81;border-radius:17px;background:radial-gradient(ellipse at 50% 48%,#dce9c977,transparent 68%),#fff9e7;box-shadow:inset 0 2px #fffef6,0 4px 9px #b38b3930} #bag-dialog.menu-window .equipment-board{min-height:280px} #bag-dialog.menu-window .gear-slot>div{border:2px solid #e4c17b;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fffdf2,#ffe8ad);box-shadow:inset 0 2px 4px #cba15344,0 3px 0 #b88b47} #bag-dialog.menu-window .gear-slot button{min-height:27px;padding:3px 7px;font-size:10px;box-shadow:0 2px 0 #c39150} #bag-dialog.menu-window .gear-slot>span,#bag-dialog.menu-window #equipment-stat{color:#8d5c22} #bag-dialog.menu-window .inventory-grid{gap:9px;padding:4px} #bag-dialog.menu-window .inventory-slot{border:1px solid #cfaa66;border-radius:11px;background:linear-gradient(145deg,#fffdf3,#f8e9c5);box-shadow:inset 0 1px #fff,0 3px 0 #d5b480;min-height:0;padding:5px} #bag-dialog.menu-window .inventory-slot.empty{background:#f4e9cd;opacity:.6;box-shadow:inset 0 2px 5px #b9914230} #bag-dialog.menu-window .inventory-slot.selected{outline:2px solid #5e9a73;outline-offset:1px;background:#edf3d9} #bag-dialog.menu-window .inventory-slot:not(.empty):hover{background:#fff0c3;transform:translateY(-1px)} #bag-dialog.menu-window .inventory-slot :is(small,.count){color:#62441f;text-shadow:none;background:#fff3cded;border-radius:4px} dialog.menu-window .preview-controls{color:#896c46;font-size:11px} dialog.menu-window .preview-controls button{min-height:28px;padding:4px 12px} :is(#bag-dialog,#npc-dialog).menu-window .bag-item-tooltip{z-index:25;color:#51381f;background:linear-gradient(#fffdf2,#fff0cf);border:1px solid #c9984c;border-radius:12px;box-shadow:inset 0 1px #fff,0 8px 24px #68452240} :is(#bag-dialog,#npc-dialog).menu-window .bag-item-tooltip::first-line{color:#98601c} /* Merchant: one scrolling body retains all tabs, confirmation flows and fields. */ #npc-dialog.menu-window{width:min(1020px,96vw);height:min(760px,calc(100dvh - 40px))} #npc-dialog.menu-window .vendor-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0;margin:0} #npc-dialog.menu-window .vendor-header .muted{display:none} #npc-dialog.menu-window .vendor-header b{background:#ffefbd;border:1px solid #dcaf65;border-radius:20px;padding:5px 12px;color:#8e5b1c;font-size:13px} #npc-dialog.menu-window .vendor-content{min-height:auto;overflow:visible;flex:none} #npc-dialog.menu-window :is(.vendor-detail,.craft-recipe,.quest-reward,.class-options article){border:1px solid #dfbc7d;border-radius:16px;background:linear-gradient(135deg,#fffdf4,#fff1d1);box-shadow:inset 0 1px #fff,0 3px 8px #ad7f2b1c} #npc-dialog.menu-window :is(.vendor-slot,#shop .item){background:radial-gradient(ellipse at 50% 10%,#fffefa,#fff4d7);border:1px solid #dfbd81;border-radius:15px;box-shadow:inset 0 1px #fff,0 3px 0 #d7b87f;gap:10px;color:#614526} #npc-dialog.menu-window #shop button{background:linear-gradient(#ffeaa7,#ffd070);border-color:#be8b3d;border-radius:10px;color:#66451e;padding:10px} #npc-dialog.menu-window .vendor-slot small{color:#9a691f} #npc-dialog.menu-window .vendor-slot[aria-pressed=true]{border-color:#669472;background:#eef3d9;box-shadow:inset 0 0 0 1px #82a77c,0 3px 0 #71956a} #npc-dialog.menu-window .vendor-footer{margin-top:22px;padding-top:15px;border-color:#dec38c;color:#866c49} #npc-dialog.menu-window #vendor-status{margin-top:14px;border:1px solid #e1b37f;background:#fff0da;color:#924c28;border-radius:10px} #npc-dialog.menu-window #vendor-status[data-ok=true]{background:#e8f2d7;color:#35623f;border-color:#a4bb84} #npc-dialog.menu-window #quest-chapters li{color:#826b48;border-color:#e0c797;background:#fffaf0} #npc-dialog.menu-window #quest-chapters li[data-current=true]{color:#82521b;border-color:#d4a04b;background:#ffedb8} #npc-dialog.menu-window #quest-meter{accent-color:#72a54d} dialog.menu-window :is(#sale-art,#buy-art){border-color:#dfb972;border-radius:18px;background:radial-gradient(circle at 40% 30%,#fffff2,#f6d99a);box-shadow:inset 0 2px #fff,0 3px 0 #d3aa62} dialog.menu-window .sale-summary{padding:16px;background:#fff0c6;border:1px solid #e0b569;border-radius:12px} dialog.menu-window .sale-summary strong{color:#92601c} :is(#buy-confirm,#sell-confirm,#craft-confirm,#roster-confirm).menu-window{width:min(490px,94vw)} #craft-confirm.menu-window .menu-body{text-align:center} #craft-confirm.menu-window #craft-cancel{background:linear-gradient(#fffdf2,#fff0cb)} /* Character status and skills retain the real 3D preview and live statistics. */ #character-dialog.menu-window{width:min(900px,94vw)} #character-dialog.menu-window #character-level{color:#966420;background:#fff0c7;border:1px solid #e2bd7d;border-radius:20px;padding:5px 15px;margin-bottom:18px;font-size:13px} #character-dialog.menu-window .character-stats-layout{grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);gap:22px} #character-dialog.menu-window .character-weapon-card{padding:18px;border:1px solid #ddbc7e;border-radius:18px;background:radial-gradient(ellipse at 50% 34%,#dfeacd80,transparent 60%),#fff7dd;box-shadow:inset 0 1px #fff,0 4px 12px #be964730} #character-dialog.menu-window .character-weapon-card h3{font-size:16px;color:#7f5425} #character-dialog.menu-window #character-attack{display:block;padding:10px;border:1px solid #d5a552;border-radius:14px;background:linear-gradient(#fff0bd,#ffd171);box-shadow:inset 0 2px #fff8da,0 3px 0 #c59138;font-size:32px;color:#694313} #character-dialog.menu-window #character-bonus{color:#8b6b43;font-size:11px;line-height:1.8} #character-dialog.menu-window .character-values{grid-template-columns:1fr 1fr;gap:12px;margin:0} #character-dialog.menu-window .character-values>div{padding:14px;border:1px solid #e2c897;border-radius:13px;background:linear-gradient(#fffef7,#fff7e4);box-shadow:inset 0 1px #fff,0 3px 7px #ba934320} #character-dialog.menu-window .character-values dt{font-size:12px;color:#907044} #character-dialog.menu-window .character-values dd{color:#54391e;font-size:15px;font-weight:600;line-height:1.65;margin-top:6px} #character-dialog.menu-window #character-xp{font-size:13px;color:#627c36} #character-dialog.menu-window #bestiary-open{margin-top:20px;background:linear-gradient(#fffef3,#fff0c6);color:#81541e;border:1px solid #c99548;font-size:12px;padding:9px 16px} dialog.menu-window .character-skill-table{width:100%;border-collapse:separate;border-spacing:0 5px} dialog.menu-window .character-skill-table th{color:#8f6125;background:#f9e5b6;border-bottom:1px solid #dab979} dialog.menu-window .character-skill-table :is(td,th){padding:13px 12px} dialog.menu-window .character-skill-table tbody tr{background:#fffdf2} dialog.menu-window .character-skill-table tbody tr:nth-child(even){background:#fbefd3} dialog.menu-window .character-skill-table tbody tr:hover{background:#f6e4b4} /* Journals, map, help, audio and shortcut editor use the same surface language. */ dialog.menu-window :is(#bestiary-list,#quest-journal-list){max-height:none;overflow:visible;padding:0} dialog.menu-window .bestiary-card{padding:20px;border:1px solid #dfbe85;border-radius:16px;background:linear-gradient(145deg,#fffef6,#fff3d5);box-shadow:inset 0 1px #fff,0 4px 10px #b9924230} dialog.menu-window .bestiary-emblem{border:2px solid #edcc83;background:radial-gradient(circle at 35% 25%,#fffef1,#f5dfad);box-shadow:inset 0 1px #fff,0 3px 0 #ccaa68;color:#539f72} dialog.menu-window .bestiary-emblem.fox{color:#be893d} dialog.menu-window .bestiary-emblem.golem{color:#7e94aa} dialog.menu-window .bestiary-count{border-color:#e6cf9f;color:#9b6d2d} dialog.menu-window :is(.quest-chapter,.quest-journal-card){background:#fffbed;border:1px solid #dfc591;border-radius:14px;padding:18px} #quest-journal-dialog.menu-window #quest-journal-list>article{background:linear-gradient(#fffdf3,#fff3d8);border:1px solid #dfbd7f;border-radius:15px;color:#604929;box-shadow:inset 0 1px #fff,0 3px 8px #b9924220} #quest-journal-dialog.menu-window #quest-journal-list>article[data-current=true]{background:#fff0c5;border-color:#c99b4e} #world-map-dialog.menu-window{width:min(980px,96vw)} dialog.menu-window .world-map-layout{gap:22px} dialog.menu-window #world-map-canvas{border:3px solid #d4aa61;border-radius:16px;box-shadow:0 4px 0 #af8447,0 7px 15px #99753430} dialog.menu-window .world-map-legend{padding:18px;background:#fffbee;border:1px solid #e4c793;border-radius:16px;color:#7a5e37} #help-dialog.menu-window dl{padding:16px;border:1px solid #e3c996;background:#fffcf0;border-radius:14px;gap:15px;line-height:1.7} #help-dialog.menu-window dt{font-weight:700;color:#916325} #sound-dialog.menu-window label{margin-top:18px;font-size:13px} #sound-dialog.menu-window output{color:#926427;font-variant-numeric:tabular-nums} #sound-dialog.menu-window #audio-test{margin-top:20px} #hotbar-dialog.menu-window{width:min(500px,94vw)} #hotbar-dialog.menu-window .hotbar-tile{background:linear-gradient(#fffaf0,#f7dfaa);border-color:#d0a666;min-height:88px;padding:22px 4px 9px;border-radius:11px} #hotbar-dialog.menu-window .hotbar-tile :is(span,kbd){color:#976322;text-shadow:0 1px #fff} #hotbar-dialog.menu-window .hotbar-tile[aria-pressed=true],#hotbar-dialog.menu-window .hotbar-tile.drop-target{background:linear-gradient(#fff0bb,#ffd06b);border-color:#b07b2c;box-shadow:inset 0 0 0 2px #ffe6a0,0 3px #bd8c40} #hotbar-dialog.menu-window #hotbar-options label{margin-top:13px} #hotbar-dialog.menu-window :is(#hotbar-reset,#hotbar-retry,#hotbar-conflict button){background:linear-gradient(#fffdf2,#ffeccb);color:#795024} #hotbar-dialog.menu-window #hotbar-status[data-state=error],#hotbar-dialog.menu-window #hotbar-status[data-state=auth-error],#hotbar-dialog.menu-window #hotbar-status[data-state=conflict]{color:#a34f2b} /* Inspection and confirmation dialogs also keep their X outside the scroller. */ #player-inspection.menu-window{width:min(920px,94vw)} #player-inspection.menu-window .inspect-stage{background:radial-gradient(ellipse at center,#e6eccb,#fff5db80 67%,transparent);border-color:#e8cf91} #player-inspection.menu-window .inspect-details{background:#fffbee;border:1px solid #e3c691;border-radius:18px;box-shadow:inset 0 1px #fff,0 4px 10px #bd954527} #player-inspection.menu-window .inspect-stats>div{background:#fff5dc;border:1px solid #e7cf9e} #player-inspection.menu-window .inspect-details :is(dd,h2){color:#51381f} #player-inspection.menu-window :is(.inspect-class,.inspect-details dt,.inspect-status,.inspect-rotate span){color:#8c6d42} #player-inspection.menu-window .inspect-gear>div{border-color:#e1c995} #roster-confirm.menu-window #roster-confirm-icon{margin:0 auto 16px;border:1px solid #e4c17c;background:radial-gradient(#fff8d4,#f7dfac);color:#a5762d;box-shadow:inset 0 1px #fff,0 3px #c7a36a} #roster-confirm.menu-window #roster-confirm-description{color:#816744} #roster-confirm.menu-window #roster-confirm-summary{background:#fff5db;border:1px solid #e3c895} #roster-confirm.menu-window #roster-confirm-submit{color:#634016;background:linear-gradient(#ffedaf,#ffd06d);border-color:#bd8637} #roster-confirm.menu-window[data-kind=delete] #roster-confirm-submit{background:linear-gradient(#bf7460,#9f4c3e);border-color:#8e4736;color:#fff8e9;box-shadow:inset 0 1px #edb199,0 3px #763c2e} #player-context-menu{border:1px solid #c0924e;border-radius:15px;background:linear-gradient(#fffbe9,#ffedc1);color:#644824;box-shadow:inset 0 1px #fff,0 3px #b58b4e,0 10px 25px #412e2940} #player-context-menu .player-menu-name{border-color:#ddbf83} #player-context-menu button{color:#745125} #player-context-menu button:hover,#player-context-menu button:focus-visible{background:#f4dda8;outline-color:#c29851} @media(max-width:760px){ dialog.menu-window .menu-header{min-height:68px;padding:12px 14px;gap:10px} dialog.menu-window .menu-emblem{width:34px;height:34px} dialog.menu-window .menu-title :is(h2,strong){font-size:18px} dialog.menu-window .menu-body{padding:17px} #character-dialog.menu-window .character-stats-layout{grid-template-columns:minmax(160px,.8fr) minmax(0,1.2fr);gap:13px} #character-dialog.menu-window .character-values{gap:8px} #character-dialog.menu-window .character-values>div{padding:10px} #bag-dialog.menu-window .bag-layout{grid-template-columns:minmax(225px,.85fr) minmax(240px,1.15fr);gap:12px} #bag-dialog.menu-window .equipment-pane{padding:10px} #npc-dialog.menu-window .vendor-header{align-items:flex-start;flex-direction:column;gap:3px} #npc-dialog.menu-window .vendor-header b{font-size:11px;padding:1px 8px} dialog.menu-window #bestiary-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ :is(#bag-dialog,#npc-dialog,#character-dialog,#bestiary-dialog,#quest-journal-dialog,#world-map-dialog,#help-dialog,#sound-dialog,#hotbar-dialog,#craft-confirm,#buy-confirm,#sell-confirm,#roster-confirm,#player-inspection).menu-window{max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px);border-radius:17px} dialog.menu-window .menu-header{padding:10px 12px;border-radius:16px 16px 0 0;gap:8px} dialog.menu-window .menu-title .eyebrow{font-size:8px;letter-spacing:.08em} dialog.menu-window .menu-body{padding:14px} #bag-dialog.menu-window>.menu-body{overflow:auto} #bag-dialog.menu-window .bag-layout{display:flex;flex-direction:column;flex:none} #bag-dialog.menu-window .equipment-board{min-height:110px;grid-template-columns:repeat(3,1fr);grid-template-rows:auto} #bag-dialog.menu-window .gear-slot:nth-child(n){grid-column:auto;grid-row:auto} #bag-dialog.menu-window .character-pane{display:none} #bag-dialog.menu-window .bag-scroll{flex:none;overflow:visible} #bag-dialog.menu-window .inventory-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px} #character-dialog.menu-window .character-stats-layout{grid-template-columns:1fr} #character-dialog.menu-window .character-weapon-card{padding:12px} #character-dialog.menu-window .character-values{grid-template-columns:1fr 1fr} dialog.menu-window #bestiary-list{grid-template-columns:1fr} dialog.menu-window :is(.vendor-tabs,.bag-filters,.character-tabs){gap:7px} dialog.menu-window :is(.vendor-tabs,.bag-filters,.character-tabs) button{padding:7px 9px;flex:1 1 auto} dialog.menu-window .vendor-footer{flex-direction:column} dialog.menu-window .vendor-footer span{max-width:none} } @media(max-height:520px){dialog.menu-window .menu-header{min-height:56px;padding-block:8px}dialog.menu-window .menu-body{padding:14px}} @media(prefers-reduced-motion:reduce){dialog.menu-window[open]{animation:none}dialog.menu-window button{transition:none}dialog.menu-window button:hover{transform:none}} /* Context actions, count badges and quest states stay legible on light surfaces. */ dialog.menu-window .menu-header{z-index:1100} #bag-dialog.menu-window .slot-qty{color:#6c481f;text-shadow:none;background:#fff5d9f2;padding:0 3px;border-radius:4px} dialog.menu-window .game-context-menu{border-color:#c6984e;background:linear-gradient(#fffdf2,#fff0cd);color:#5d4223;border-radius:12px;box-shadow:inset 0 1px #fff,0 3px #bc914d,0 8px 24px #76552644} dialog.menu-window .game-context-menu strong{color:#926125} dialog.menu-window .game-context-menu button{box-shadow:none;background:transparent;border:0;border-radius:7px} dialog.menu-window .game-context-menu button:hover{background:#f5dfae;outline-color:#c1944c} #quest-journal-dialog.menu-window #quest-journal-list>article[data-status=active]{border-color:#d7a956;background:#fff2cc} #quest-journal-dialog.menu-window #quest-journal-list>article[data-status=ready]{border-color:#96b777;background:#f1f5db} dialog.menu-window .journal-rewards span{color:#866021;background:#f6e5bc;border:1px solid #e1c58a;border-radius:7px} #character-selection button:not(.roster-delete){border-color:#c8a16a;background:linear-gradient(#fffdf3,#f5e8c7);color:#73552d;box-shadow:inset 0 1px #fff,0 3px 0 #c4a170;transition:background .15s,box-shadow .15s} #character-selection .roster-slot{border-color:#d6bf8d;background:linear-gradient(#fffdf2,#f6eed9);box-shadow:inset 0 1px #fff,0 3px 0 #d2bb8b} #character-selection :is(.primary,#roster-appearance-save,.roster-slot[aria-pressed=true]){background:linear-gradient(#ffe9a5,#ffd071);border-color:#c3974d;color:#62471f;box-shadow:inset 0 1px #fff6d8,0 3px 0 #b88e47} #character-selection button:not(:disabled):not(.roster-delete):hover{background:linear-gradient(#fffef6,#ffe9b6);border-color:#b68c44} @media(prefers-reduced-motion:reduce){#character-selection button{transition:none}} dialog.menu-window :is(#sell-review,#sell-cancel,#buy-cancel){background:linear-gradient(#fffdf2,#ffedc5);color:#795324;border-color:#c99750} dialog.menu-window #craft-quantity:focus-visible{outline:3px solid #408368;outline-offset:3px} #character-selection .roster-slot[aria-pressed=true] small{color:#896639} #character-dialog.menu-window .menu-title #character-name{color:#51361c;font:700 24px/1.4 "Leelawadee UI",Tahoma,sans-serif;margin:3px 0 0;text-shadow:0 1px #fff9de} #player-inspection.menu-window .inspect-rotate button{background:linear-gradient(#fffdf2,#ffedc5);border-color:#c99750;color:#795324;box-shadow:inset 0 1px #fff,0 3px #c39150} /* A shaded glove and jade cuff identify ground pickups; permission remains server-owned. */ #world[data-loot-hover]{cursor:url('/assets/cursors/loot-hand.svg?v=0.1.127') 10 40,grab} /* Animated pickup hand follows the pointer without intercepting item clicks. */ #world[data-loot-animated]{cursor:none} #loot-hand-pointer{position:fixed;width:48px;height:48px;max-width:none;pointer-events:none;z-index:49;user-select:none;transform:translate(-10px,-40px)} #loot-hand-pointer[hidden]{display:none} /* One unobtrusive item name, below the hovered ground item. */ #loot-item-name{position:fixed;z-index:48;pointer-events:none;max-width:calc(100vw - 16px);padding:2px 4px;color:#fff4cf;font:600 12px/1.5 "Leelawadee UI",Tahoma,sans-serif;text-shadow:0 1px 2px #10271c,1px 0 2px #10271c,-1px 0 2px #10271c,0 -1px 2px #10271c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none} #loot-item-name[hidden]{display:none} .label.boundary-pass-label{white-space:pre-line;text-align:center;color:#f6dfae;font:600 12px/1.65 "Leelawadee UI",Tahoma,sans-serif;text-shadow:0 2px 3px #152b23,1px 0 2px #152b23,-1px 0 2px #152b23;pointer-events:none} /* v0.1.127 — one viewport, independent touch controls, scrollable menu bodies. */ :root{--view-height:100dvh;--view-top:0px;--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)} html,body{overscroll-behavior:none}#world{touch-action:none}button{touch-action:manipulation} #touch-controls,#rotate-screen,.touch-help{display:none} #rotate-screen[hidden],#hud[hidden]{display:none!important} #gate{max-height:100dvh;overflow:auto;overscroll-behavior:contain} html.touch-device :is(input,select,textarea){font-size:16px!important} html.touch-device #hud{position:fixed;inset:0;height:100dvh;pointer-events:none} html.touch-device #touch-controls{display:block;pointer-events:none} html.touch-device #touch-stick{position:absolute;left:calc(22px + var(--safe-left));bottom:calc(40px + var(--safe-bottom));width:114px;height:114px;border-radius:50%;border:2px solid #ffe3a375;background:radial-gradient(circle,#274e4888,#193b3b44);box-shadow:inset 0 3px 12px #072e3466,0 2px 6px #142e3244;touch-action:none;pointer-events:auto;display:grid;place-items:center;user-select:none;-webkit-user-select:none} #touch-knob{width:48px;height:48px;border-radius:50%;border:2px solid #f4dda0;background:radial-gradient(circle at 35% 25%,#effacbbb,#639986cc 50%,#284f48);box-shadow:inset 0 2px #fff8cf,0 4px 9px #072b3870;pointer-events:none} #touch-stick small{position:absolute;bottom:9px;font-size:10px;color:#fff4d2;pointer-events:none} html.touch-device #touch-actions{position:absolute;right:calc(10px + var(--safe-right));bottom:calc(92px + var(--safe-bottom));display:flex;gap:6px;pointer-events:auto} #touch-actions button{min-height:44px;min-width:48px;padding:8px;border:1px solid #d6b973;border-radius:14px;background:linear-gradient(#52786aee,#204a44ee);color:#fff4d1;box-shadow:inset 0 1px #fff2ae77,0 3px #172f2a;font:700 11px Tahoma,sans-serif} #touch-actions #touch-attack{background:linear-gradient(#ffe4a2,#d29c4a);color:#64431f;min-width:64px} html.touch-device #hud #player-panel{left:calc(8px + var(--safe-left));top:calc(6px + var(--safe-top));width:270px;max-width:calc(100vw - 195px - var(--safe-left) - var(--safe-right));grid-template-columns:60px minmax(0,1fr);gap:8px;padding:0} html.touch-device #hud .portrait-frame{width:60px;height:60px;padding:5px} html.touch-device #hud .player-name{margin-bottom:3px;gap:4px} html.touch-device #hud #player-name{font-size:13px} html.touch-device #hud #level{min-width:42px;padding:2px 5px;font-size:10px} html.touch-device #hud #player-panel .meter{height:14px;margin:4px 0} html.touch-device #hud #player-panel .meter span{font-size:10px} html.touch-device #hud>.zone{top:calc(5px + var(--safe-top));right:calc(8px + var(--safe-right));width:140px;text-align:right} html.touch-device #hud>.zone small{display:none} html.touch-device #hud>.zone strong{font-size:12px} html.touch-device #hud .right-stack{display:block;top:calc(35px + var(--safe-top));right:calc(8px + var(--safe-right));width:128px;gap:0} html.touch-device #hud .map{padding:6px;width:128px;box-sizing:border-box} html.touch-device #hud #minimap{width:112px;height:80px;display:block} html.touch-device #hud .map-head{font-size:10px;margin-bottom:3px} html.touch-device #hud .map-foot{font-size:9px;margin-top:3px} html.touch-device #hud .map-foot span:last-child{display:none} html.touch-device #hud .side-menu{top:calc(35px + var(--safe-top));right:calc(143px + var(--safe-right));bottom:auto;width:48px;height:auto;overflow:visible;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:auto} html.touch-device #hud #menu-toggle{width:44px;height:44px;min-height:44px;flex:none;font-size:24px;order:-1} html.touch-device #hud #side-menu-items{position:absolute;right:0;top:52px;width:230px;max-height:calc(100dvh - 100px - var(--safe-top) - var(--safe-bottom));padding:10px;overflow:auto;border:1px solid #d8b977;border-radius:18px;background:#204c43f5;box-shadow:0 8px 28px #0c292a66;display:block} html.touch-device #hud :is(.side-adventure,.side-system){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:0;width:100%} html.touch-device #hud .side-system{margin-top:9px;padding-top:9px;border-top:1px solid #dfc28255} html.touch-device #hud #side-menu-items button{width:60px;height:54px;min-height:54px;margin:0;flex:none} html.touch-device #hud .bottom{left:auto;right:calc(10px + var(--safe-right));bottom:calc(22px + var(--safe-bottom));transform:none;width:max-content;max-width:calc(100vw - 166px - var(--safe-right));padding:7px 8px} html.touch-device #hud .actionbar{gap:5px;display:flex;flex-wrap:nowrap;margin:0} html.touch-device #hud .actionbar .skill{width:48px;height:48px;min-width:48px;min-height:48px;flex:0 0 48px;margin:0} html.touch-device #hud .actionbar .skill kbd{font-size:9px} html.touch-device #hud .currency{position:absolute;left:6px;right:auto;top:-24px;bottom:auto;min-width:0;max-width:120px;padding:1px 8px;font-size:11px;border-radius:12px;background:#244e42cc;display:flex;gap:5px;align-items:center} html.touch-device #hud .currency small{display:none} html.touch-device #hud #hotbar-settings{top:-27px;right:0;min-height:24px;padding:3px 10px} html.touch-device #hud .exp{bottom:var(--safe-bottom);height:10px} html.touch-device #hud .hud-social{left:calc(8px + var(--safe-left));bottom:calc(165px + var(--safe-bottom));width:280px;max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));gap:5px;pointer-events:none;z-index:25} html.touch-device #hud #chat-restore{min-height:36px;max-width:160px;pointer-events:auto;padding:6px 12px} html.touch-device #hud .hud-social #chat-panel{display:block;pointer-events:auto;max-height:calc(100dvh - 95px - var(--safe-top) - var(--safe-bottom));padding:10px;overflow:auto} html.touch-device #hud .chat-lines{height:64px;min-height:32px;max-height:18dvh} html.touch-device #hud #chat-panel :is(button,input){min-height:36px} html.touch-device #hud .chat-title>span{display:none} html.touch-device #hud .runtime-status{position:fixed;left:calc(8px + var(--safe-left));bottom:calc(15px + var(--safe-bottom));max-width:180px;min-height:0;padding:3px 7px;font-size:9px;pointer-events:none} html.touch-device #hud .runtime-status :is(#save-state,#connection){display:none} html.touch-device #hud #death-status{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);width:230px;pointer-events:none} html.touch-device #hud #interact{bottom:calc(154px + var(--safe-bottom));top:auto} html.touch-device #hud #npc-open{min-height:44px} html.touch-device #hud #notices{top:calc(80px + var(--safe-top));max-width:calc(100vw - 290px);left:40%;font-size:12px} html.touch-device #hud #waypoint-hud{top:calc(78px + var(--safe-top));left:calc(8px + var(--safe-left));max-width:210px;font-size:11px} /* Headers never enter the scroll area, including short landscape phones. */ html.touch-device dialog.menu-window{position:fixed;inset:0;margin:auto!important;box-sizing:border-box;min-width:0!important;max-width:calc(100vw - 16px - var(--safe-left) - var(--safe-right))!important;max-height:calc(var(--view-height) - 16px - var(--safe-top) - var(--safe-bottom))!important;border-radius:16px;padding:0;overflow:hidden} html.touch-device dialog.menu-window[open]{display:flex;flex-direction:column} html.touch-device dialog.menu-window .menu-header{position:relative;top:auto;flex:none;min-height:56px;padding:6px 12px;gap:8px;box-sizing:border-box} html.touch-device dialog.menu-window .menu-title{min-width:0} html.touch-device dialog.menu-window .menu-title :is(h2,strong){font-size:18px!important;overflow-wrap:anywhere} html.touch-device dialog.menu-window .menu-title .eyebrow{font-size:9px} html.touch-device dialog.menu-window .menu-emblem{width:30px;height:30px} html.touch-device dialog.menu-window .menu-close{position:static;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin-left:auto} html.touch-device dialog.menu-window>.menu-body{min-height:0;min-width:0;padding:12px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} html.touch-device dialog.menu-window :is(button,input,select){min-height:44px} html.touch-device dialog.menu-window :is(.bag-layout,.vendor-layout,.world-map-layout,.character-stats-layout,.inspect-layout){gap:12px} html.touch-device #bag-dialog.menu-window .bag-layout{display:grid;grid-template-columns:minmax(200px,.9fr) minmax(260px,1.2fr);grid-template-rows:auto;flex:none;overflow:visible} html.touch-device #bag-dialog.menu-window .equipment-board{min-height:220px;grid-template-columns:58px minmax(50px,1fr) 58px} html.touch-device #bag-dialog.menu-window .bag-scroll{overflow:visible;flex:none} html.touch-device #bag-dialog.menu-window .inventory-grid{grid-template-columns:repeat(5,minmax(0,1fr))} html.touch-device #bag-dialog.menu-window .inventory-slot{min-height:48px} html.touch-device .vendor-layout{grid-template-columns:minmax(0,1fr) minmax(210px,.8fr);min-height:0} html.touch-device dialog.menu-window .vendor-tabs{flex-wrap:wrap;gap:5px;flex:none} html.touch-device dialog.menu-window .vendor-tabs button{padding:6px 10px;flex:1} html.touch-device #world-map-canvas{width:100%;height:auto;max-width:100%} html.touch-device .world-map-layout{grid-template-columns:minmax(0,1fr) minmax(150px,.45fr)} html.touch-device .touch-help{display:block;line-height:1.7} html.touch-device #character-selection{padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));height:100dvh;box-sizing:border-box} html.touch-device .roster-header{margin-bottom:12px;gap:12px} html.touch-device .roster-header h1{font-size:24px;margin:0} html.touch-device .roster-layout{grid-template-columns:minmax(170px,.8fr) minmax(210px,1fr) minmax(240px,1fr);gap:12px} html.touch-device .roster-layout>*{min-width:0} html.touch-device .roster-stage{min-height:280px;grid-row:auto} html.touch-device #roster-preview-slot{height:250px} html.touch-device .roster-details{grid-column:auto} html.touch-device :is(.roster-list,.roster-details){padding:12px} html.touch-device #gate{padding:16px;box-sizing:border-box} html.touch-device #gate .entry{width:min(400px,100%);max-width:100%;box-sizing:border-box} html.touch-device #gate input{min-height:44px} html.touch-device.keyboard-open #hud .hud-social{position:fixed;top:calc(var(--view-top) + 6px);bottom:auto;left:calc(8px + var(--safe-left));width:min(420px,calc(100vw - 24px));max-height:calc(var(--view-height) - 12px);pointer-events:auto} html.touch-device.keyboard-open #hud .hud-social #chat-panel{max-height:calc(var(--view-height) - 12px);box-sizing:border-box} html.touch-device.keyboard-open #touch-controls{display:none} html.touch-device #rotate-screen:not([hidden]){display:grid;position:fixed;inset:0;z-index:5000;place-items:center;padding:24px;background:radial-gradient(ellipse at top,#406e59,#122f31);color:#fff4d2;text-align:center;box-sizing:border-box} .rotate-card{max-width:360px}.rotate-card>span{display:block;font-size:80px;color:#f2d48d}.rotate-card h2{font-size:22px}.rotate-card p{line-height:1.7}.rotate-card button{min-height:48px;border:1px solid #c59955;border-radius:14px;padding:12px 18px;background:linear-gradient(#fff0b9,#e7b65d);color:#604323;font:700 16px Tahoma,sans-serif}.rotate-card small{display:block;margin-top:20px;line-height:1.7;color:#d3dfce} @media(max-width:900px){html.touch-device .roster-layout{grid-template-columns:minmax(180px,.7fr) minmax(220px,1fr)}html.touch-device .roster-details{grid-column:1/-1}} @media(max-width:600px){ html.touch-device .roster-layout{grid-template-columns:1fr}html.touch-device .roster-details{grid-column:auto} html.touch-device #bag-dialog.menu-window .bag-layout,html.touch-device :is(.vendor-layout,.world-map-layout,.character-stats-layout,.inspect-layout){display:flex;flex-direction:column} html.touch-device #bag-dialog.menu-window .equipment-board{grid-template-columns:repeat(3,1fr);min-height:110px} html.touch-device #bag-dialog.menu-window .character-pane{display:none} } @media(max-height:450px){ html.touch-device #hud .right-stack{width:108px}html.touch-device #hud .map{width:108px}html.touch-device #hud #minimap{width:92px;height:62px} html.touch-device #hud .side-menu{right:calc(122px + var(--safe-right))} html.touch-device #hud .hud-social{bottom:calc(160px + var(--safe-bottom));width:270px} html.touch-device #hud .hud-social #chat-panel{max-height:calc(100dvh - 105px);} html.touch-device #hud .hud-social:has(#chat-panel:not([hidden])){bottom:calc(24px + var(--safe-bottom))} html.touch-device #hud .actionbar .skill{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px} html.touch-device #hud .bottom{bottom:calc(20px + var(--safe-bottom))} html.touch-device #hud #touch-actions{bottom:calc(88px + var(--safe-bottom))} html.touch-device #gate{display:flex;align-items:flex-start;justify-content:center;gap:24px} html.touch-device #gate .brand{max-width:35%;margin-top:20px}html.touch-device #gate .brand h1{font-size:32px} html.touch-device #gate .entry{margin:0} } @media(max-width:700px) and (orientation:landscape){ html.touch-device #hud #player-panel{width:220px;grid-template-columns:48px minmax(0,1fr)}html.touch-device #hud .portrait-frame{width:48px;height:48px} html.touch-device #hud #touch-stick{width:98px;height:98px;left:calc(12px + var(--safe-left))} html.touch-device #hud .bottom{max-width:calc(100vw - 125px - var(--safe-right));right:calc(6px + var(--safe-right));padding:6px} html.touch-device #hud .actionbar{gap:3px} html.touch-device #hud #touch-actions{gap:4px} html.touch-device #hud #notices{max-width:230px} } html.touch-device #gate .entry{position:relative;right:auto;top:auto;transform:none;max-height:none;margin:20px auto;overflow:visible} html.touch-device.keyboard-open dialog.menu-window{top:calc(var(--view-top) + 6px);bottom:auto;margin:0 auto!important} html.touch-device #hud .bottom .divider{display:none} html.touch-device #hud .bottom .actionbar{padding:0} html.touch-device #hud .hud-social #chat-panel[hidden]{display:none!important} @media(max-height:450px){html.touch-device #gate .brand{position:relative;left:auto;top:auto;flex:1}html.touch-device #gate .entry{margin:0;flex:1}} html.touch-device #hud #touch-actions{bottom:calc(116px + var(--safe-bottom))} html.touch-device #hud #interact{bottom:calc(182px + var(--safe-bottom))} html.touch-device #hud .side-menu{z-index:40} html.touch-device #hud .hud-social{z-index:35} html.touch-device #hud #notices{pointer-events:none} html.touch-device #hud>.zone .eyebrow{display:none} html.touch-device #hud>.zone h2{font-size:12px;line-height:20px;margin:0} html.touch-device #hud #meditate{width:48px;height:48px;min-width:48px;min-height:48px;flex:0 0 48px} html.touch-device dialog.menu-window .menu-header .menu-close{width:44px!important;height:44px!important;min-height:44px!important;flex-basis:44px!important} html.touch-device #player-context-menu button,html.touch-device .game-context-menu button{min-height:44px} @media(max-height:450px){html.touch-device #hud #meditate{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px}} html.touch-device #gate{display:flex;flex-direction:column;align-items:center;justify-content:flex-start} html.touch-device #gate .brand{display:none} html.touch-device #bag-dialog.menu-window .inventory-slot .item-art{width:min(48px,100%);height:auto;aspect-ratio:1} html.touch-device #hud .hud-social :is(#chat-lines,#combat-lines,#reward-lines){height:64px;min-height:32px;max-height:18dvh} /* v0.1.127 — device-specific corner HUD and short-landscape entry screens. */ .auth-intro,.auth-fields,.roster-profile-scroll,.roster-play-actions{display:contents} .mobile-auth-brand{display:none} html.touch-device{--edge-left:max(8px,min(env(safe-area-inset-left,0px),24px));--edge-right:max(8px,min(env(safe-area-inset-right,0px),24px));--edge-top:max(6px,env(safe-area-inset-top,0px));--edge-bottom:max(14px,env(safe-area-inset-bottom,0px));-webkit-text-size-adjust:100%;text-size-adjust:100%} html:not(.touch-device) #touch-controls,html:not(.touch-device) #rotate-screen,html:not(.touch-device) .touch-help{display:none!important} /* Login: two balanced columns, each scrollable on a short browser viewport. */ html.touch-device #gate{top:var(--view-top);bottom:auto;height:var(--view-height);max-height:var(--view-height);padding:10px var(--edge-right) 10px var(--edge-left);display:grid;place-items:center;overflow:auto} html.touch-device #gate .entry{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(220px,1.1fr);gap:22px;width:min(740px,100%);max-width:100%;max-height:calc(var(--view-height) - 20px);margin:0;padding:18px 22px;border:1px solid #d2b47280;border-radius:20px;background:linear-gradient(135deg,#173e39f5,#102e33f5);box-shadow:inset 0 1px #e2ca8f44,0 12px 35px #051e2c55;overflow:hidden;flex:none} html.touch-device #gate :is(.auth-intro,.auth-fields){display:block;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin} html.touch-device #gate .auth-intro{padding-right:18px;border-right:1px solid #d3bb7b33} html.touch-device .mobile-auth-brand{display:block;font:22px Georgia,serif;letter-spacing:.12em;color:#ffe6aa;margin-bottom:14px} .mobile-auth-brand span{display:block;font:9px Tahoma,sans-serif;letter-spacing:.35em;margin-top:3px;color:#afd0bb} html.touch-device #gate .entry-head{font-size:9px;gap:6px;flex-wrap:wrap} html.touch-device #gate .entry-head>span:last-child{display:none} html.touch-device #gate .tag{padding:3px 6px} html.touch-device #gate h2{font-size:20px;margin:12px 0 6px} html.touch-device #gate .muted{font-size:12px;line-height:1.5;margin:6px 0 14px} html.touch-device #gate #google-login{min-height:44px;font-size:13px;padding:10px;justify-content:center;border-radius:10px} html.touch-device #gate #google-note{font-size:10px;line-height:1.5;margin:8px 0} html.touch-device #gate .auth-fields>.fine{display:none} html.touch-device #gate label{font-size:12px;margin-top:6px} html.touch-device #gate input,html.touch-device #gate select{padding:8px 10px;min-height:44px;margin-top:4px;border-radius:9px} html.touch-device #gate #auth-submit{min-height:44px;border-radius:10px;margin-top:10px;padding:10px;font-size:13px} html.touch-device #gate #auth-error{font-size:11px;line-height:1.4;min-height:0;margin:6px 0} html.touch-device #gate #auth-error:empty{display:none} html.touch-device #gate #auth-toggle{min-height:36px;padding:8px 0 0;font-size:12px} html.touch-device #gate .pair{gap:8px} /* Roster: always expose the entry action; profile and slots scroll independently. */ html.touch-device #character-selection{top:var(--view-top);bottom:auto;height:var(--view-height);padding:10px var(--edge-right) 10px var(--edge-left);overflow:hidden} html.touch-device .roster-shell{height:100%;min-height:0;display:flex;flex-direction:column;max-width:1280px} html.touch-device .roster-header{flex:none;margin:0 0 8px;min-height:42px} html.touch-device .roster-header h1{font-size:19px;line-height:1.4;margin:0} html.touch-device .roster-header p,html.touch-device .roster-header .eyebrow{display:none} html.touch-device #character-selection #roster-logout{min-height:40px;padding:7px 12px;font-size:12px;border-radius:12px} html.touch-device .roster-layout{flex:1;min-height:0;grid-template-columns:minmax(130px,.78fr) minmax(160px,1fr) minmax(210px,1.06fr);grid-template-rows:minmax(0,1fr);gap:10px;align-items:stretch} html.touch-device .roster-list{overflow:auto;padding:10px;border-radius:16px;scrollbar-width:thin} html.touch-device .roster-section-title h2{font-size:14px;margin:0 0 4px} html.touch-device .roster-section-title>span{font-size:10px} html.touch-device #roster-slots{gap:8px;margin-top:10px;grid-template-columns:1fr} html.touch-device #character-selection .roster-slot{min-height:52px;gap:8px;padding:9px 8px;border-radius:12px} html.touch-device .slot-emblem{width:28px;height:28px;font-size:20px;display:grid} html.touch-device .roster-slot strong{font-size:12px} html.touch-device .roster-slot small{font-size:10px;margin-top:3px} html.touch-device .roster-note{display:none} html.touch-device .roster-stage{min-height:0;grid-row:auto;grid-column:auto;padding:0;justify-content:flex-end} html.touch-device .roster-stage-caption{display:none} html.touch-device #roster-preview-slot{height:auto;min-height:100px;flex:1;max-height:100%;width:100%} html.touch-device .roster-stage-name{margin:4px 0 0;flex:none} html.touch-device .roster-stage-name h2{font-size:17px} html.touch-device .roster-stage-name p{font-size:10px;margin:3px 0} html.touch-device .roster-details{display:flex;flex-direction:column;min-height:0;padding:10px;grid-column:auto;border-radius:16px;overflow:hidden} html.touch-device .roster-profile-scroll{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin} html.touch-device .roster-profile-scroll>.eyebrow{display:none} html.touch-device .roster-details h2{font-size:14px;margin:0 0 5px} html.touch-device .roster-details h3{font-size:12px;margin:9px 0 5px} html.touch-device .roster-details #roster-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:6px 0} html.touch-device #roster-stats>div{padding:6px;border-radius:8px} html.touch-device #roster-stats dt{font-size:9px} html.touch-device #roster-stats dd{font-size:12px;margin-top:3px} html.touch-device #roster-equipment p{font-size:10px;padding:6px 0;gap:4px} html.touch-device .roster-appearance-fields{gap:6px;grid-template-columns:1fr} html.touch-device .roster-appearance-fields label{font-size:11px;margin:0} html.touch-device .roster-appearance-fields select{padding:8px 6px;min-height:40px} html.touch-device .roster-play-actions{display:block;flex:none;border-top:1px solid #cbb88b66;margin-top:6px;padding-top:6px;background:#fff5db} html.touch-device #character-selection #roster-enter{margin:0;min-height:44px;font-size:13px;padding:9px 12px;border-radius:10px} html.touch-device #character-selection #roster-delete{display:inline-block;margin:3px 0 0;padding:4px 6px;font-size:10px;min-height:28px} html.touch-device #roster-status{font-size:10px;min-height:0;line-height:1.4;margin:3px 0 0} html.touch-device #roster-status:empty{display:none} html.touch-device .roster-footer{flex:none;margin-top:6px;font-size:9px;flex-direction:row;align-items:center} html.touch-device #character-selection .roster-footer button{min-height:28px;padding:3px 9px;font-size:10px} /* In-game controls occupy two corners, leaving the middle of the screen clear. */ html.touch-device #hud{top:var(--view-top);bottom:auto;height:var(--view-height)} html.touch-device #hud #player-panel{left:var(--edge-left);top:var(--edge-top);width:224px;max-width:calc(100vw - 160px);grid-template-columns:46px minmax(0,1fr);gap:6px} html.touch-device #hud .portrait-frame{width:46px;height:46px;padding:4px} html.touch-device #hud #player-name{font-size:12px} html.touch-device #hud #player-panel .meter{height:12px;margin:3px 0} html.touch-device #hud #player-panel .meter span{font-size:9px} html.touch-device #hud #level{font-size:9px;min-width:36px;padding:2px 4px} html.touch-device #hud>.zone{top:var(--edge-top);right:var(--edge-right);width:132px} html.touch-device #hud>.zone h2{font-size:10px;line-height:16px} html.touch-device #hud .right-stack{display:block;right:var(--edge-right);top:calc(var(--edge-top) + 20px);width:94px} html.touch-device #hud .right-stack .map{display:block;width:94px;padding:4px;border-radius:12px;background:#143d37cf} html.touch-device #hud .right-stack .quest-card{display:none} html.touch-device #hud #minimap{width:84px;height:54px;border-radius:7px} html.touch-device #hud .map-head{font-size:8px;margin:0 0 2px} html.touch-device #hud .map-foot{font-size:8px;margin:2px 0 0} html.touch-device #hud .side-menu{right:calc(var(--edge-right) + 102px);top:calc(var(--edge-top) + 20px);width:40px;padding:0} html.touch-device #hud #menu-toggle{width:40px;height:40px;min-height:40px;font-size:22px} html.touch-device #hud #side-menu-items{right:0;top:46px;max-height:calc(var(--view-height) - 82px);width:222px} html.touch-device #hud #touch-stick{left:var(--edge-left);bottom:calc(var(--edge-bottom) + 20px);width:94px;height:94px;border:1px solid #ead18c99;background:radial-gradient(circle,#5b95822b 0 36%,#163f3c77 37% 60%,#accca522 61% 63%,#163f3c66 64%);box-shadow:inset 0 1px #fff3bd77,0 5px 14px #0b343644} html.touch-device #touch-knob{width:40px;height:40px;background:radial-gradient(circle at 35% 22%,#e8f6cfe8,#79b69de8 43%,#2d6859 82%);box-shadow:inset 0 1px #ffefb9,0 4px 8px #0b343688} html.touch-device #touch-stick small{display:none} html.touch-device #hud .bottom{right:var(--edge-right);bottom:calc(var(--edge-bottom) + 6px);left:auto;padding:0;width:146px;max-width:146px;transform:none} html.touch-device #hud .bottom .actionbar{display:grid;grid-template-columns:repeat(3,44px);gap:5px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0} html.touch-device #hud .actionbar .skill,html.touch-device #hud #meditate{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px;border-radius:14px;box-shadow:inset 0 1px #fff6cb99,0 3px #143c35,0 5px 9px #0c292a55;background:linear-gradient(145deg,#5b8b77ee,#1d4e45ee);border:1px solid #d7b86e} html.touch-device #hud .actionbar .skill:hover,html.touch-device #hud .actionbar .meditate-action:hover{transform:none} html.touch-device #hud .actionbar kbd{display:none} html.touch-device #hud .actionbar .skill>span,html.touch-device #hud #meditate>span{font-size:24px} html.touch-device #hud .actionbar .skill small{font-size:8px} html.touch-device #hud .currency{position:fixed;top:calc(var(--view-top) + var(--edge-top) + 56px);left:var(--edge-left);right:auto;bottom:auto;padding:2px 8px;font-size:10px;max-width:120px;background:#173e37ae;border:1px solid #dfc38555;border-radius:12px} html.touch-device #hud #hotbar-settings{top:-29px;right:0;min-height:24px;padding:3px 8px;font-size:9px} html.touch-device #hud #touch-actions{display:block;position:absolute;inset:0;pointer-events:none} html.touch-device #touch-actions button{position:absolute;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:0;padding:5px;touch-action:manipulation;border:1px solid #dabe7c;background:linear-gradient(145deg,#537f6be8,#1b4b42ed);box-shadow:inset 0 1px #ffedb777,0 3px #123930,0 5px 12px #0e292d44;color:#ffebbb} html.touch-device #touch-actions svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} html.touch-device #touch-actions small{font:8px Tahoma,sans-serif;pointer-events:none} html.touch-device #touch-actions #touch-attack{right:calc(var(--edge-right) + 158px);bottom:calc(var(--edge-bottom) + 20px);width:66px;height:66px;min-width:0;border-radius:50%;background:radial-gradient(circle at 38% 25%,#fff3be,#e4b65e 55%,#9c682e);border:2px solid #ffedb6;color:#70491d;box-shadow:inset 0 0 0 2px #bf8b47,0 3px #82542b,0 5px 14px #0f303766} html.touch-device #touch-actions #touch-attack svg{width:30px;height:30px} html.touch-device #touch-actions #touch-target{right:calc(var(--edge-right) + 161px);bottom:calc(var(--edge-bottom) + 95px);width:44px;height:44px;border-radius:50%} html.touch-device #touch-actions #touch-stop{right:calc(var(--edge-right) + 233px);bottom:calc(var(--edge-bottom) + 16px);width:40px;height:40px;border-radius:50%} html.touch-device #touch-actions #touch-camera{right:calc(var(--edge-right) + 102px);top:calc(var(--edge-top) + 66px);width:40px;height:40px;border-radius:12px} html.touch-device #hud .hud-social{left:var(--edge-left);bottom:calc(var(--edge-bottom) + 124px);width:260px;max-width:calc(100vw - 32px)} html.touch-device #hud #chat-restore{font-size:10px;min-height:32px;padding:5px 10px;border-radius:12px;max-width:130px;background:#214d41cc} html.touch-device #hud .runtime-status{left:var(--edge-left);bottom:calc(var(--edge-bottom) - 2px);font-size:8px;padding:2px 6px;max-width:180px} html.touch-device #hud .exp{bottom:0;height:8px} html.touch-device #hud #waypoint-hud{top:calc(var(--edge-top) + 79px);left:var(--edge-left);max-width:190px} html.touch-device #hud #notices{top:calc(var(--edge-top) + 22px);left:50%;max-width:calc(100vw - 430px);font-size:10px} html.touch-device #hud #notices div{padding:5px 8px;font-size:10px} html.touch-device #hud #interact{bottom:calc(var(--edge-bottom) + 25px);left:50%;max-width:180px} html.touch-device #hud #npc-open{font-size:11px;padding:7px 10px;min-height:40px} @media(orientation:portrait){ html.touch-device #gate .entry{grid-template-columns:1fr;gap:14px;width:min(440px,100%);overflow:auto} html.touch-device #gate .auth-intro{border-right:0;border-bottom:1px solid #d3bb7b33;padding:0 0 12px} html.touch-device #gate :is(.auth-intro,.auth-fields){overflow:visible} html.touch-device .roster-layout{grid-template-columns:minmax(150px,.8fr) minmax(200px,1.2fr);grid-template-rows:minmax(120px,.8fr) minmax(180px,1fr)} html.touch-device .roster-list{grid-row:1/3}html.touch-device .roster-stage{grid-column:2;grid-row:1}html.touch-device .roster-details{grid-column:2;grid-row:2} } @media(max-height:350px) and (orientation:landscape){ html.touch-device #gate .entry{padding:12px 16px;gap:16px} html.touch-device #gate .mobile-auth-brand{font-size:18px;margin-bottom:8px} html.touch-device #gate h2{font-size:17px;margin-top:8px} html.touch-device #gate .entry-head{display:none} html.touch-device .roster-footer>span{display:none} html.touch-device .roster-footer{justify-content:flex-end;margin-top:3px} html.touch-device #character-selection .roster-footer button{min-height:24px} html.touch-device .roster-header{margin-bottom:5px;min-height:36px} html.touch-device #character-selection #roster-logout{min-height:36px} } html.touch-device.keyboard-open #gate .entry{overflow:auto;max-height:calc(var(--view-height) - 12px)} html.touch-device.keyboard-open #gate :is(.auth-intro,.auth-fields){overflow:visible} html.touch-device.keyboard-open #hud .hud-social{top:calc(var(--view-top) + 4px);bottom:auto;left:var(--edge-left)} html.touch-device #gate{grid-template-columns:minmax(0,1fr);justify-content:stretch;align-content:center;gap:0} html.touch-device #gate .entry{justify-self:center} html.touch-device #gate .gate-footer{display:none} html.touch-device #touch-actions small{display:none} html.touch-device #touch-actions svg{flex:none} html.touch-device #hud #interact{bottom:calc(var(--edge-bottom) + 150px)} /* v0.1.128 — mobile edge HUD; desktop gameplay layout stays unchanged. */ #roster-preview-slot .preview-controls{display:none} .roster-stage>.roster-play-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:min(100%,380px);padding:10px 8px 6px;z-index:1;flex:none} #character-selection .roster-stage #roster-enter{grid-column:1;grid-row:1;margin:0;min-height:44px;justify-content:center;border-radius:12px;font-size:14px;padding:10px} #character-selection .roster-stage #roster-delete{grid-column:2;grid-row:1;margin:0;min-height:44px;width:auto;padding:8px 12px;border:1px solid #c79778;background:linear-gradient(#fff9e8,#efd9b9);color:#95593d;border-radius:12px;font-size:12px;box-shadow:inset 0 1px #fff,0 3px #ba9465} #character-selection .roster-stage #roster-status{grid-column:1/-1;margin:0;min-height:0;font-size:11px;max-height:48px;overflow:auto} #character-selection .roster-stage #roster-status:empty{display:none} html.touch-device{--edge-left:max(3px,min(env(safe-area-inset-left,0px),24px));--edge-right:max(3px,min(env(safe-area-inset-right,0px),24px));--edge-top:max(3px,env(safe-area-inset-top,0px));--edge-bottom:max(12px,env(safe-area-inset-bottom,0px));--stick-size:88px;--stick-bottom:calc(var(--edge-bottom) + 16px);--chat-bottom:calc(var(--stick-bottom) + var(--stick-size) + 8px)} html.touch-device .roster-stage>.roster-play-actions{display:grid;width:100%;padding:5px 0 4px;margin:0;border:0;background:none;gap:5px} html.touch-device #character-selection .roster-stage #roster-enter{font-size:12px;padding:7px} html.touch-device #character-selection .roster-stage #roster-delete{font-size:10px;padding:7px;min-height:44px;margin:0} html.touch-device #roster-preview-slot{min-height:0} html.touch-device .roster-stage-name p{margin:1px 0} html.touch-device #hud .right-stack{top:calc(var(--edge-top) + 17px)} html.touch-device #hud .side-menu{top:var(--edge-top);right:calc(var(--edge-right) + 102px);width:32px;bottom:auto;overflow:visible} html.touch-device #hud #menu-toggle{width:32px;height:32px;min-height:32px;padding:0;margin:0;font-size:20px;box-shadow:inset 0 0 0 2px #fff0c5,0 2px #8f6e3d,0 3px 5px #123c3555} html.touch-device #hud #side-menu-items{top:40px;right:0;width:min(396px,calc(100vw - var(--edge-left) - var(--edge-right) - 338px));min-width:140px;max-height:62px;padding:5px 6px 8px;display:flex;flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:thin;border-radius:14px;touch-action:pan-x} html.touch-device #hud #side-menu-items :is(.side-adventure,.side-system){display:flex;flex-direction:row;width:auto;flex:none;gap:6px;margin:0;padding:0;border:0} html.touch-device #hud #side-menu-items .side-system{padding-left:6px;border-left:1px solid #dfc28255} html.touch-device #hud .side-menu #side-menu-items button{width:40px;height:40px;min-height:40px;min-width:40px;padding:3px} html.touch-device #hud .side-menu #side-menu-items button::before{width:28px;height:28px} html.touch-device #hud #side-menu-items #fullscreen{display:none} html.touch-device #touch-actions #touch-fullscreen,html.touch-device #touch-actions #touch-camera{top:var(--edge-top);bottom:auto;width:36px;height:32px;border-radius:10px} html.touch-device #touch-actions #touch-fullscreen{right:calc(var(--edge-right) + 140px)} html.touch-device #touch-actions #touch-camera{right:calc(var(--edge-right) + 182px)} html.touch-device #hud #touch-stick{left:var(--edge-left);bottom:var(--stick-bottom);width:var(--stick-size);height:var(--stick-size)} html.touch-device #hud .bottom{right:var(--edge-right);bottom:var(--edge-bottom);width:289px;max-width:calc(100vw - var(--edge-left) - var(--edge-right) - 100px);padding:0} html.touch-device #hud .bottom .actionbar{grid-template-columns:repeat(6,44px);grid-template-rows:44px;gap:5px;justify-content:end} html.touch-device #touch-actions #touch-attack{right:var(--edge-right);bottom:calc(var(--edge-bottom) + 55px);width:62px;height:62px} html.touch-device #touch-actions #touch-target{right:calc(var(--edge-right) + 72px);bottom:calc(var(--edge-bottom) + 58px);width:44px;height:44px} html.touch-device #hud #hotbar-settings{right:128px;top:-34px;min-height:28px;padding:4px 9px} html.touch-device #hud .hud-social,html.touch-device #hud .hud-social:has(#chat-panel:not([hidden])){position:absolute;left:var(--edge-left);bottom:var(--chat-bottom);top:auto;width:260px;gap:0;max-width:calc(100vw - var(--edge-left) - var(--edge-right) - 110px)} html.touch-device #hud .hud-social #chat-panel{position:relative;inset:auto;display:flex;flex-direction:column;padding:5px 6px;max-height:calc(var(--view-height) - var(--chat-bottom) - var(--edge-top) - 76px);height:190px;min-height:0;overflow:hidden;border-radius:12px;background:linear-gradient(145deg,#355c44ec,#193e38ee);box-shadow:inset 0 1px #f7e9b72e,0 4px 10px #10322944} html.touch-device #hud #chat-panel .chat-title{position:absolute;right:5px;top:4px;font-size:0;height:28px} html.touch-device #hud #chat-hide{width:28px;height:28px;min-height:28px;font-size:19px} html.touch-device #hud #chat-panel .chat-tabs{height:28px;flex:none;margin:0;padding-right:30px;gap:4px;align-items:center} html.touch-device #hud #chat-panel .chat-tabs button{min-height:26px;font-size:9px;padding:3px 7px} html.touch-device #hud .hud-social :is(#chat-lines,#combat-lines,#reward-lines){height:auto;min-height:16px;max-height:none;flex:1;overflow:auto;font-size:10px;line-height:1.6;margin:3px 0;overscroll-behavior:contain} html.touch-device #hud #chat-form{flex:none;height:32px;gap:4px;margin:0} html.touch-device #hud #chat-input{height:32px;min-height:32px;margin:0;padding:4px 6px;font-size:16px;line-height:22px} html.touch-device #hud #chat-input::placeholder{font-size:10px} html.touch-device #hud #chat-form button{width:30px;min-height:32px;padding:0;flex:none} html.touch-device #hud .hud-social .runtime-status{position:fixed;left:var(--edge-left);bottom:calc(100dvh - var(--view-top) - var(--view-height) + 9px);padding:1px 5px;line-height:12px;height:16px;margin:0;font-size:8px;max-width:180px;gap:6px} html.touch-device.keyboard-open #hud .hud-social,html.touch-device.keyboard-open #hud .hud-social:has(#chat-panel:not([hidden])){position:fixed;top:calc(var(--view-top) + 4px);bottom:auto;max-width:calc(100vw - var(--edge-left) - var(--edge-right));width:min(420px,calc(100vw - var(--edge-left) - var(--edge-right)))} html.touch-device.keyboard-open #hud .hud-social #chat-panel{height:calc(var(--view-height) - 8px);max-height:calc(var(--view-height) - 8px)} @media(prefers-reduced-motion:reduce){html.touch-device #hud button{transition:none}} @media(max-height:310px) and (orientation:landscape){ html.touch-device{--stick-size:80px} html.touch-device #hud .hud-social #chat-panel{padding:3px 6px} html.touch-device #hud #chat-panel .chat-tabs{height:24px} html.touch-device #hud #chat-panel .chat-tabs button{min-height:24px;height:24px;padding:2px 6px} html.touch-device #hud #chat-panel .chat-title{top:3px;height:24px} html.touch-device #hud #chat-panel #chat-hide{min-height:24px;height:24px;width:26px} html.touch-device #hud .hud-social :is(#chat-lines,#combat-lines,#reward-lines){min-height:8px;margin:2px 0;line-height:14px} html.touch-device #hud #chat-panel #chat-form,html.touch-device #hud #chat-panel #chat-input,html.touch-device #hud #chat-panel #chat-form button{height:28px;min-height:28px} html.touch-device #hud #chat-panel #chat-input{padding:2px 6px} } /* v0.1.129 — compact roster, complete loading screen and translucent top rail. */ #roster-preview-slot #character-preview{height:100%;width:100%;display:block} .roster-stage{justify-content:flex-end} #character-selection .roster-list{position:relative} #character-selection #roster-logout{display:block;margin:0 0 10px auto;padding:6px 12px;min-height:32px;border:1px solid #b68b4f;border-radius:10px;color:#785329;background:linear-gradient(#fff6d9,#f1d396);font-size:11px;font-weight:bold;box-shadow:inset 0 1px #fff9e9,0 2px #b78d51} #character-selection .roster-details{padding:14px} #character-selection .roster-details h2{font-size:17px;margin:0 0 8px} #character-selection .roster-details h3{font-size:13px;margin:12px 0 5px} #character-selection #roster-stats{gap:6px;margin:8px 0;grid-template-columns:repeat(3,minmax(0,1fr))} #character-selection #roster-stats>div{padding:8px;border-radius:9px} #character-selection #roster-stats dt{font-size:11px} #character-selection #roster-stats dd{font-size:14px;line-height:1.45;margin-top:4px} #character-selection #roster-equipment p{font-size:12px;padding:7px 0;margin:0;gap:6px} #character-selection .roster-appearance-fields label{font-size:12px;margin-top:4px} #character-selection .roster-appearance-fields select{min-height:34px;margin-top:3px;padding:5px 7px} html.touch-device{--edge-left:0px;--edge-top:max(1px,env(safe-area-inset-top,0px));--stick-size:104px} html.touch-device #character-selection{padding:5px var(--edge-right) 5px 3px} html.touch-device .roster-header{display:none} html.touch-device #character-selection #roster-logout{min-height:30px;padding:4px 9px;font-size:10px;margin-bottom:6px} html.touch-device .roster-footer{margin-top:2px;font-size:8px;min-height:12px} html.touch-device #character-selection .roster-details{padding:8px;border-radius:13px} html.touch-device #character-selection .roster-details h2{font-size:13px;margin-bottom:4px} html.touch-device #character-selection .roster-details h3{font-size:11px;margin:8px 0 4px} html.touch-device #character-selection #roster-stats{gap:4px;margin:4px 0} html.touch-device #character-selection #roster-stats>div{padding:5px} html.touch-device #character-selection #roster-stats dt{font-size:9px} html.touch-device #character-selection #roster-stats dd{font-size:11px;margin-top:2px} html.touch-device #character-selection #roster-equipment p{padding:5px 0;font-size:10px} html.touch-device #character-selection .roster-appearance-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px} html.touch-device #character-selection .roster-appearance-fields label{font-size:10px} html.touch-device #character-selection .roster-appearance-fields select{font-size:12px;min-height:32px} html.touch-device #character-selection .roster-appearance-note{font-size:9px;margin:5px 0} /* Loading uses the actual visible height, including before the game bundle starts. */ #loading{max-height:100dvh;overflow:auto} @media(max-height:540px){ #loading{padding:10px} .loading-card{width:min(480px,92vw)} .loading-card .eyebrow{font-size:9px} .loading-card h1{font-size:32px;margin:5px 0 2px} .loading-subtitle{font-size:10px;margin:2px 0;letter-spacing:.22em} .loading-emblem{font-size:24px;margin:5px auto;line-height:1} .loading-card h2{font-size:14px;margin:5px 0} #loading-status{font-size:11px;margin:4px 0;min-height:16px} #loading-percent{font-size:10px;margin:3px 0} .loading-tip{font-size:10px;margin:6px 0;line-height:1.4} #loading-retry{padding:5px 14px;min-height:30px;font-size:11px} } html.touch-device #loading{top:var(--view-top,0px);bottom:auto;height:var(--view-height,100dvh);max-height:var(--view-height,100dvh);padding:8px;overflow:auto} /* A single top row: menu icons, camera, fullscreen and collapse. */ html.touch-device #hud #player-panel{left:0;top:var(--edge-top);width:198px;grid-template-columns:40px minmax(0,1fr);gap:4px} html.touch-device #hud .portrait-frame{width:40px;height:40px;padding:3px} html.touch-device #hud #player-name{font-size:11px} html.touch-device #hud #player-panel .meter{height:10px;margin:2px 0} html.touch-device #hud #player-panel .meter span{font-size:8px;line-height:10px} html.touch-device #hud .currency{left:0;top:calc(var(--view-top) + var(--edge-top) + 48px);font-size:9px;padding:1px 6px;background:#183e3755;backdrop-filter:blur(3px)} html.touch-device #hud #side-menu-items{top:0;right:120px;min-width:0;width:min(308px,calc(100vw - var(--edge-right) - 430px));height:36px;max-height:36px;padding:0 2px 4px;gap:4px;border:0;border-radius:10px;background:#244e3d55;box-shadow:none;backdrop-filter:blur(3px)} html.touch-device #hud #side-menu-items :is(.side-adventure,.side-system){gap:4px} html.touch-device #hud #side-menu-items .side-system{padding-left:4px} html.touch-device #hud .side-menu #side-menu-items button{width:32px;height:32px;min-height:32px;min-width:32px;padding:2px} html.touch-device #hud .side-menu #side-menu-items button::before{width:23px;height:23px} html.touch-device #hud .right-stack .map{background:#143d3766;backdrop-filter:blur(3px)} html.touch-device #hud .hud-social,html.touch-device #hud .hud-social:has(#chat-panel:not([hidden])){left:0;width:240px} html.touch-device #hud .hud-social #chat-panel{background:linear-gradient(145deg,#355c4488,#193e3899);backdrop-filter:blur(3px);max-height:calc(var(--view-height) - var(--chat-bottom) - var(--edge-top) - 60px)} html.touch-device #hud #chat-restore{font-size:9px;min-height:28px;padding:3px 8px;background:#214d4166;backdrop-filter:blur(3px)} html.touch-device #hud .hud-social .runtime-status{left:0;background:#23473666;box-shadow:none;border-color:#c9ac6233;font-size:8px;height:15px;padding:1px 4px} html.touch-device #hud #touch-stick{left:0;background:radial-gradient(circle,#5b958219 0 36%,#163f3c33 37% 60%,#accca522 61% 63%,#163f3c33 64%)} html.touch-device #touch-knob{width:46px;height:46px} html.touch-device #hud .actionbar .skill,html.touch-device #hud #meditate{background:linear-gradient(145deg,#5b8b7790,#1d4e4580);backdrop-filter:blur(2px)} html.touch-device #touch-actions button:not(#touch-attack){background:linear-gradient(145deg,#537f6b88,#1b4b4288);backdrop-filter:blur(2px)} html.touch-device #hud #hotbar-settings{background:#244f4166} html.touch-device.keyboard-open #hud .hud-social #chat-panel{max-height:calc(var(--view-height) - 8px)} @media(max-height:310px) and (orientation:landscape){ html.touch-device{--stick-size:96px} html.touch-device #hud .hud-social #chat-panel{max-height:calc(var(--view-height) - var(--chat-bottom) - var(--edge-top) - 58px)} } @media(min-width:1000px) and (min-height:500px){ html:not(.touch-device) #character-selection{padding:20px 28px;overflow:hidden} html:not(.touch-device) .roster-shell{height:100%;display:flex;flex-direction:column;min-height:0} html:not(.touch-device) .roster-header{flex:none;margin-bottom:14px} html:not(.touch-device) .roster-header h1{font-size:30px;margin:5px 0} html:not(.touch-device) .roster-layout{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)} html:not(.touch-device) .roster-stage{min-height:0} html:not(.touch-device) #roster-preview-slot{flex:1;min-height:0;height:auto} html:not(.touch-device) .roster-list,html:not(.touch-device) .roster-details{overflow:auto;min-height:0} html:not(.touch-device) .roster-footer{margin-top:8px;flex:none} html:not(.touch-device) .roster-stage-caption{display:none} } /* v0.1.130 — mobile menu fit, thumb room and a lighter desktop HUD. */ #character-selection .roster-details{display:flex;flex-direction:column;min-height:0;overflow:hidden} #character-selection .roster-profile-scroll{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin} #character-selection .roster-account-actions{flex:none;display:flex;justify-content:flex-end;padding-top:8px;margin-top:6px;border-top:1px solid #9aab8c33} #character-selection .roster-account-actions #roster-logout{margin:0;min-height:34px} html.touch-device #character-selection .roster-account-actions{padding-top:5px;margin-top:4px} html.touch-device #character-selection .roster-account-actions #roster-logout{margin:0;min-height:32px} html.touch-device{--stick-size:110px;--stick-left:max(12px,min(env(safe-area-inset-left,0px),24px));--chat-left:calc(var(--stick-left) + var(--stick-size) + 10px);--chat-bottom:var(--edge-bottom)} html.touch-device #hud #touch-stick{left:var(--stick-left)} html.touch-device #touch-knob{width:49px;height:49px} html.touch-device #hud .hud-social,html.touch-device #hud .hud-social:has(#chat-panel:not([hidden])){left:var(--chat-left);bottom:var(--chat-bottom);width:240px;max-width:calc(100vw - var(--chat-left) - var(--edge-right))} html.touch-device #hud .hud-social #chat-panel{height:160px;max-height:calc(var(--view-height) - var(--chat-bottom) - var(--edge-top) - 66px)} html.touch-device #hud #chat-restore{min-height:32px;padding:4px 10px} @media(max-width:720px) and (orientation:landscape){ html.touch-device{--chat-bottom:calc(var(--edge-bottom) + 56px)} } @media(max-height:310px) and (orientation:landscape){html.touch-device{--stick-size:102px}} html.touch-device.keyboard-open #hud .hud-social{left:var(--edge-left);bottom:auto;top:4px;width:min(420px,calc(100vw - var(--edge-left) - var(--edge-right)))} html.touch-device.keyboard-open #hud .hud-social #chat-panel{height:calc(var(--view-height) - 8px);max-height:calc(var(--view-height) - 8px)} /* Every popup uses visible viewport height; only its content scrolls. */ html.touch-device dialog.menu-window{top:calc(var(--view-top,0px) + 6px + var(--safe-top));bottom:auto;left:calc(6px + var(--safe-left));right:calc(6px + var(--safe-right));width:min(920px,calc(100vw - 12px - var(--safe-left) - var(--safe-right)));max-width:calc(100vw - 12px - var(--safe-left) - var(--safe-right))!important;max-height:calc(var(--view-height,100dvh) - 12px - var(--safe-top) - var(--safe-bottom))!important;font-size:12px;line-height:1.5;border-radius:14px} html.touch-device dialog.menu-window .menu-header{padding:4px 10px;min-height:48px;gap:7px;border-radius:13px 13px 0 0} html.touch-device dialog.menu-window .menu-emblem{width:26px;height:26px} html.touch-device dialog.menu-window .menu-title .eyebrow{display:none} html.touch-device dialog.menu-window .menu-title :is(h2,strong){font-size:15px!important;margin:0!important} html.touch-device dialog.menu-window .menu-header .menu-close{width:40px!important;height:40px!important;min-height:40px!important;flex-basis:40px!important;font-size:26px;border-radius:10px} html.touch-device dialog.menu-window>.menu-body{padding:10px;scrollbar-gutter:auto;overflow:auto;flex:1 1 auto} html.touch-device dialog.menu-window .menu-body>*{min-width:0;max-width:100%;box-sizing:border-box} html.touch-device dialog.menu-window h3{font-size:13px;margin:8px 0 6px} html.touch-device dialog.menu-window p{margin:6px 0} html.touch-device dialog.menu-window .muted{font-size:11px;line-height:1.5} html.touch-device dialog.menu-window button{font-size:12px;min-height:36px;padding:6px 10px;border-radius:9px} html.touch-device dialog.menu-window :is(input:not([type=checkbox]):not([type=range]),select){font-size:16px;min-height:38px;max-width:100%;box-sizing:border-box;padding:6px 8px} html.touch-device dialog.menu-window :is(.bag-filters,.vendor-tabs,.character-tabs){gap:5px;padding-bottom:7px;margin-bottom:8px;flex-wrap:wrap} html.touch-device dialog.menu-window :is(.bag-filters,.vendor-tabs,.character-tabs) button{font-size:11px;min-height:34px;padding:5px 8px} html.touch-device #bag-dialog.menu-window>.menu-body{display:block;overflow:auto} html.touch-device #bag-dialog.menu-window .bag-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px} html.touch-device #bag-dialog.menu-window .bag-summary{font-size:12px;padding-bottom:6px;margin-bottom:8px} html.touch-device #bag-dialog.menu-window .equipment-pane{display:block;padding:8px;overflow:visible} html.touch-device #bag-dialog.menu-window .equipment-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;min-height:0;gap:6px} html.touch-device #bag-dialog.menu-window .gear-slot:nth-child(n){grid-column:auto;grid-row:auto;padding:5px 2px} html.touch-device #bag-dialog.menu-window .gear-slot :is(p,span){font-size:10px} html.touch-device #bag-dialog.menu-window .gear-slot button{padding:4px 2px;font-size:10px;width:100%} html.touch-device #bag-dialog.menu-window .gear-slot .item-art{width:42px;height:42px;max-width:100%;margin:0 auto} html.touch-device #bag-dialog.menu-window .character-pane{display:none} html.touch-device #bag-dialog.menu-window .bag-items{display:block} html.touch-device #bag-dialog.menu-window .inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} html.touch-device #bag-dialog.menu-window .inventory-slot{padding:4px;min-height:48px} html.touch-device #npc-dialog.menu-window .vendor-header{flex-direction:row;align-items:center;gap:8px} html.touch-device #npc-dialog.menu-window .vendor-header .muted{display:none} html.touch-device #npc-dialog.menu-window .vendor-layout{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);min-height:0;gap:10px} html.touch-device #npc-dialog.menu-window .vendor-content{overflow:visible;flex:none} html.touch-device #npc-dialog.menu-window #shop{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} html.touch-device #npc-dialog.menu-window #shop .item{display:flex;padding:8px;gap:5px} html.touch-device #npc-dialog.menu-window #shop .item-art{width:48px;height:48px} html.touch-device #npc-dialog.menu-window :is(.vendor-detail,.craft-recipe,.quest-reward,.class-options article){padding:10px;min-width:0} html.touch-device #character-dialog.menu-window .character-stats-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:10px} html.touch-device #character-dialog.menu-window .character-weapon-card{padding:8px} html.touch-device #character-dialog.menu-window .character-values{gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))} html.touch-device #character-dialog.menu-window .character-values>div{padding:7px} html.touch-device #character-dialog.menu-window .character-values dd{font-size:13px;margin-top:2px} html.touch-device dialog.menu-window #bestiary-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} html.touch-device dialog.menu-window .bestiary-card{padding:10px} html.touch-device dialog.menu-window .bestiary-emblem{width:44px;height:44px;font-size:28px;margin-bottom:6px} html.touch-device dialog.menu-window .journal-chapter{padding:10px} html.touch-device #help-dialog.menu-window dl{padding:10px;gap:8px;grid-template-columns:minmax(100px,.65fr) minmax(0,1.35fr)} html.touch-device #sound-dialog.menu-window label{margin-top:10px} html.touch-device #hotbar-dialog.menu-window .hotbar-tile{min-height:68px;padding-top:18px} html.touch-device #player-inspection.menu-window .inspect-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} html.touch-device #player-inspection.menu-window .inspect-stage{min-height:200px} html.touch-device #player-inspection.menu-window .inspect-stage canvas{height:200px} html.touch-device #player-inspection.menu-window .inspect-details{padding:10px;min-width:0} /* Keep the complete square map visible, with a separately scrollable legend. */ html.touch-device #world-map-dialog{--map-size:min(560px,calc(var(--view-height) - 144px - var(--safe-top) - var(--safe-bottom)),calc(100vw - 235px - var(--safe-left) - var(--safe-right)))} html.touch-device #world-map-dialog .world-map-layout{display:grid;grid-template-columns:var(--map-size) minmax(140px,1fr);gap:12px;align-items:start;justify-content:center} html.touch-device #world-map-dialog #world-map-canvas{width:var(--map-size);height:var(--map-size);max-width:100%;justify-self:center} html.touch-device #world-map-dialog .world-map-legend{display:block;max-height:var(--map-size);overflow:auto;padding:8px 10px;border-radius:10px} html.touch-device #world-map-dialog .world-map-legend p{font-size:11px;gap:6px} html.touch-device #world-map-dialog #world-map-position{margin:0 0 4px;font-size:11px} html.touch-device #world-map-dialog .waypoint-controls{margin:0 0 8px;gap:6px} html.touch-device #world-map-dialog .waypoint-controls button{min-height:32px;padding:4px 9px;font-size:11px} html.touch-device #world-map-dialog #waypoint-map-status{font-size:10px} html.touch-device #world-map-dialog .menu-body>p:last-child{font-size:10px;margin:5px 0 0} @media(max-width:600px){ html.touch-device dialog.menu-window #bestiary-list{grid-template-columns:repeat(2,minmax(0,1fr))} html.touch-device #npc-dialog.menu-window #shop{grid-template-columns:repeat(2,minmax(0,1fr))} html.touch-device #bag-dialog.menu-window .bag-layout{display:flex;flex-direction:column} html.touch-device #bag-dialog.menu-window .inventory-grid{grid-template-columns:repeat(5,minmax(0,1fr))} } @media(orientation:portrait){ html.touch-device #world-map-dialog{--map-size:min(560px,calc(100vw - 44px - var(--safe-left) - var(--safe-right)),calc(var(--view-height) - 280px))} html.touch-device #world-map-dialog .world-map-layout{grid-template-columns:minmax(0,1fr)} html.touch-device #world-map-dialog .world-map-legend{max-height:none} } @media(max-width:440px){ html.touch-device #character-dialog.menu-window .character-stats-layout,html.touch-device #player-inspection.menu-window .inspect-layout{grid-template-columns:1fr} html.touch-device #npc-dialog.menu-window .vendor-layout{display:flex;flex-direction:column} } #hud>.zone>.eyebrow{display:none} html:not(.touch-device) #hud>.zone{top:2px} html:not(.touch-device) #hud .right-stack{top:30px} html:not(.touch-device) #hud .actionbar{background:linear-gradient(145deg,#426c5655,#173e3944);border-color:#d4b77588;box-shadow:inset 0 1px #fff3c433,0 3px 0 #76644255,0 5px 14px #102d3322;backdrop-filter:blur(2px)} html:not(.touch-device) #hud #menu-toggle{width:42px;height:42px;min-height:42px;line-height:36px;padding:0;margin-inline:auto;background:radial-gradient(circle at 35% 20%,#fffce799,#f2d89466 60%,#cfa56755);border-color:#ddc49188;box-shadow:inset 0 0 0 2px #fff9df55,0 2px 3px #70552a44;font-size:26px} html.touch-device #sound-dialog.menu-window input[type=range]{display:block;width:100%;max-width:100%;box-sizing:border-box;padding:0;min-height:32px;margin-inline:0} html.touch-device #world-map-dialog.menu-window{width:calc(var(--map-size) + min(300px,32vw) + 34px)} @media(orientation:portrait){html.touch-device #world-map-dialog.menu-window{width:min(680px,calc(100vw - 12px - var(--safe-left) - var(--safe-right)))}} #sound-dialog.menu-window input[type=range]{box-sizing:border-box;width:100%;padding:0;margin-inline:0} /* v0.1.132 — jade cloud loading art and model portraits. */ #character-selection .slot-emblem{position:relative;overflow:hidden;flex-shrink:0;background:radial-gradient(circle at 50% 35%,#fff2c8,#a3bfa3);border:1px solid #c4a269;box-shadow:inset 0 1px 3px #fff9,0 2px 4px #55371126} #character-selection .slot-emblem .roster-portrait{width:100%;height:100%;object-fit:contain;display:block} #character-selection .slot-emblem .roster-portrait[hidden]{display:none} .entry-logo{display:block;width:min(440px,40vw);height:auto;filter:drop-shadow(0 5px 10px #193a3666)} .mobile-auth-brand img{display:block;width:132px;height:76px;object-fit:contain;margin:auto} #loading{--load-progress:0%;background:#193c38 url('/assets/brand/cloud-garden.webp?v=0.1.132') center/cover no-repeat;isolation:isolate;padding:clamp(12px,3vh,36px);overflow:auto} #loading::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#102c3030,#102e3255 45%,#071e2dd9)} #loading .loading-card{width:min(590px,86vw);display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:auto;color:#fff5d7;text-shadow:0 2px 5px #062c32} #loading .loading-logo{display:block;width:min(520px,100%);height:auto;max-height:49dvh;object-fit:contain;align-self:center;filter:drop-shadow(0 5px 14px #082829aa)} #loading .loading-card h2{font-size:clamp(13px,2.3vh,18px);letter-spacing:.08em;margin:2px 0 18px;color:#fff2c3;font-weight:normal} .loading-meter{position:relative;height:15px;flex-shrink:0} #loading .loading-card progress{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden} .loading-track{height:15px;padding:2px;background:#102731df;border:1px solid #e8cc83;border-radius:30px;box-shadow:0 2px 6px #0008,inset 0 2px 4px #0009;overflow:hidden} .loading-track i{display:block;position:relative;width:var(--load-progress);height:100%;border-radius:20px;background:linear-gradient(90deg,#b69c4e,#f1cb77 50%,#fff2c0);box-shadow:0 0 9px #e8e5a6;transition:width .16s linear;overflow:hidden} .loading-track::after{content:'';display:block;position:relative;top:-100%;width:25%;height:100%;border-radius:20px;background:linear-gradient(90deg,transparent,#fff8,transparent);animation:loading-glimmer 2s linear infinite;pointer-events:none} @keyframes loading-glimmer{from{transform:translateX(-110%)}to{transform:translateX(500%)}} .loading-caption{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;min-width:0} #loading #loading-status{font-size:12px;color:#fff0c9;margin:6px 0;min-height:18px;overflow-wrap:anywhere} #loading #loading-percent{font-size:15px;color:#fff4c8;font-variant-numeric:tabular-nums;flex-shrink:0;margin:0} #loading-detail{margin:0;font-size:11px;color:#cbe0d1;min-height:16px} #loading .loading-tip{margin:14px 0 0;font-size:12px;color:#e7dcc0;line-height:1.5} #loading #loading-retry{align-self:center;margin:4px} @media (max-height:500px) and (orientation:landscape){ #loading .loading-card{width:min(480px,70vw);gap:3px} #loading .loading-logo{width:285px;height:46dvh;max-height:190px} #loading .loading-card h2{font-size:12px;margin:0 0 9px} #loading .loading-tip{font-size:10px;margin:5px 0 0} #loading-detail{font-size:10px} #loading #loading-status{font-size:11px;margin:4px 0} .mobile-auth-brand img{width:96px;height:55px} } @media(prefers-reduced-motion:reduce){.loading-track::after{animation:none}.loading-track i{transition:none}} @media(max-height:500px) and (orientation:landscape){#loading:has(#loading-retry:not([hidden])) .loading-logo{height:29dvh;max-height:140px}} /* Jade companion and six-slot equipment, v149 */ #hunt-bot-open{position:fixed;top:max(7px,env(safe-area-inset-top));left:43%;width:58px;padding:3px;border:1px solid #d5b96f;border-radius:14px;background:linear-gradient(140deg,#234c42ce,#092c29a8);color:#ffe6a2;box-shadow:inset 0 1px 1px #fff8,0 3px 12px #0005;z-index:14;font-size:10px;line-height:1.2}#hunt-bot-open img{display:block;width:36px;height:36px;margin:auto}#hunt-bot-open[data-active=true]{box-shadow:0 0 14px #83efc7a8}#hunt-bot-open[hidden]{display:none} #hunt-bot-dialog{width:min(680px,calc(100vw - 20px));max-height:calc(100dvh - 16px);padding:0;overflow:hidden}#hunt-bot-dialog .menu-header{position:sticky;top:0;z-index:1}#hunt-bot-dialog .menu-body{max-height:calc(100dvh - 92px);overflow:auto;padding:14px 20px}.bot-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.bot-fields label{display:flex;flex-direction:column;gap:5px}.bot-fields input{width:100%;box-sizing:border-box;padding:8px}.bot-species{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}#bot-form fieldset{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0;border:1px solid #bda36b80;border-radius:10px;padding:12px}#bot-form label{font-size:13px}#bot-form input[type=checkbox]{accent-color:#b08936;width:17px;height:17px;vertical-align:middle}.bot-license{color:#cdb777}.bot-state{color:#80d7b2}.bot-actions{display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;padding:10px 0;background:#163e39e8}.bot-actions button{min-height:40px;padding:8px 18px}.bot-actions [value=start]{background:linear-gradient(#eccd84,#b58435);color:#30271b} #bag-dialog .equipment-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#bag-dialog .gear-slot{position:static;min-width:0;width:auto}#bag-dialog .character-pane{grid-column:1/-1;grid-row:1;height:250px}#bag-dialog .gear-slot p{font-size:10px;line-height:1.3;min-height:26px;overflow-wrap:anywhere}#bag-dialog .gear-slot button{font-size:10px;padding:3px 6px}#inventory{grid-template-columns:repeat(6,minmax(0,1fr))} @media(max-height:550px),(max-width:700px){#hunt-bot-open{left:42%;width:42px;top:max(3px,env(safe-area-inset-top));border-radius:10px;font-size:8px}#hunt-bot-open img{width:27px;height:27px}#hunt-bot-dialog .menu-body{padding:10px 14px}#bot-form label{font-size:12px}.bot-fields{gap:8px}#bag-dialog .character-pane{height:165px}#bag-dialog .gear-slot img{width:36px;height:36px}.bot-actions button{padding:6px 12px}#hunt-bot-dialog .menu-header h2{font-size:18px}} #hunt-bot-dialog{background:#fff4d8;color:#5e492c}#hunt-bot-dialog .menu-body{background:linear-gradient(135deg,#fff9e9,#f9e9bf);color:#6e542f}#hunt-bot-dialog .bot-license{color:#8b652b}#hunt-bot-dialog .bot-state{color:#2e7764}#hunt-bot-dialog .bot-actions{background:#f9e9bff5;padding-bottom:8px}#hunt-bot-dialog .muted{color:#94784e}#hunt-bot-dialog input[type=number]{color:#493921} #bag-dialog.menu-window .equipment-board .gear-slot:nth-child(n){grid-row:auto;grid-column:auto}#bag-dialog.menu-window .equipment-board .character-pane{grid-column:1/-1;grid-row:1} html.touch-device #hud #hunt-bot-open{left:208px;top:var(--edge-top,3px);width:42px;z-index:35} html.touch-device #hunt-bot-dialog.menu-window{display:none}html.touch-device #hunt-bot-dialog.menu-window[open]{display:flex;flex-direction:column}html.touch-device #hunt-bot-dialog.menu-window .menu-body{min-height:0;max-height:calc(var(--view-height,100dvh) - 76px);overflow:auto}html.touch-device #hunt-bot-dialog .bot-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} @media(orientation:portrait){html.touch-device #hud #hunt-bot-open{left:8px;top:76px}html.touch-device #hunt-bot-dialog .bot-fields{grid-template-columns:1fr 1fr}} /* v150 development equipment shop and quest board */ #test-shop-dialog{width:min(900px,calc(100vw - 20px));max-height:calc(var(--view-height,100dvh) - 16px);padding:0;background:#fff3d6;color:#49351f;overflow:hidden} #test-shop-dialog .menu-body{max-height:calc(var(--view-height,100dvh) - 115px);overflow:auto;padding:14px} .test-shop-filters{display:flex;gap:14px;flex-wrap:wrap}.test-shop-filters select{min-width:90px;padding:8px}.test-shop-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.test-shop-items article{display:grid;grid-template-columns:52px 1fr;gap:8px;border:1px solid #d6b575;background:#fffaf0;border-radius:10px;padding:10px}.test-shop-items img{width:52px;height:52px}.test-shop-items p{font-size:12px;margin:4px 0}.test-shop-items button{grid-column:1/-1;min-height:36px}.test-shop-status{min-height:24px}.adventure-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.adventure-list article{border:1px solid #caae7b;border-radius:9px;padding:12px}.adventure-list h4,.adventure-list p{margin:4px 0}.adventure-list button{min-height:36px}.bot-mp{display:flex;gap:8px;align-items:center;margin:12px 0}.bot-mp input[type=number]{width:65px}html.touch-device #test-shop-dialog .menu-header{min-height:46px;padding:7px 12px}html.touch-device #test-shop-dialog .menu-body{max-height:calc(var(--view-height,100dvh) - 72px)}@media(max-width:600px){.test-shop-items,.adventure-list{grid-template-columns:1fr}} /* v151: compact floating inventory, equipment surrounding the preview */ html body #bag-dialog.menu-window.workshop-window[open]{position:fixed;inset:62px 18px auto auto;margin:0;width:min(790px,calc(100vw - 20px));height:min(510px,calc(100dvh - 112px));max-width:none;max-height:none;z-index:80;border-radius:16px;box-shadow:0 18px 60px #071b2390} html body #bag-dialog.menu-window.workshop-window .menu-header,html body #character-dialog.menu-window.workshop-window .menu-header,#hunt-bot-dialog .menu-header{padding:9px 14px;min-height:48px;gap:9px}html body #bag-dialog.menu-window.workshop-window .menu-header{cursor:move}html body #bag-dialog.menu-window.workshop-window .menu-header h2,html body #character-dialog.menu-window.workshop-window .menu-header h2,#hunt-bot-dialog .menu-header h2{font-size:18px}html body #bag-dialog.menu-window.workshop-window .menu-emblem,html body #character-dialog.menu-window.workshop-window .menu-emblem,#hunt-bot-dialog .menu-emblem{width:32px;height:32px}html body #bag-dialog.menu-window.workshop-window .eyebrow{display:none}html body #bag-dialog.menu-window.workshop-window .menu-close,html body #character-dialog.menu-window.workshop-window .menu-close,#hunt-bot-dialog .menu-close{width:34px;height:34px;min-width:34px;font-size:24px;padding:0} html body #bag-dialog.menu-window.workshop-window .menu-body{padding:10px;overflow:auto;min-height:0}html body #bag-dialog.menu-window.workshop-window .bag-summary{padding:0 0 5px;margin:0;font-size:12px}html body #bag-dialog.menu-window.workshop-window .bag-layout{display:grid;grid-template-columns:minmax(235px,.9fr) minmax(280px,1fr);gap:10px;height:auto;min-height:0}html body #bag-dialog.menu-window.workshop-window .equipment-pane{padding:0;overflow:visible;min-height:0;border:0;background:none;box-shadow:none}html body #bag-dialog.menu-window.workshop-window .equipment-pane>h3,html body #bag-dialog.menu-window.workshop-window .equipment-pane>.muted{display:none}html body #bag-dialog.menu-window.workshop-window .equipment-board{position:relative;display:grid;grid-template-columns:66px minmax(95px,1fr) 66px;grid-template-rows:repeat(4,72px);gap:5px;padding:5px;border-radius:12px;background:radial-gradient(ellipse,#cbd8ba80,#f8edcb);min-height:0;height:313px;overflow:hidden} html body #bag-dialog.menu-window.workshop-window .gear-slot{position:relative;z-index:2;padding:2px;background:#fff9eaa8;border:1px solid #c4ab7580;border-radius:10px;text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0}html body #bag-dialog.menu-window.workshop-window .gear-slot>span{font-size:10px;line-height:15px}html body #bag-dialog.menu-window.workshop-window .gear-slot>div{width:39px;height:39px;min-height:0;padding:2px;border-radius:50%;background:#f2e3b8;border:1px solid #c9b47f}html body #bag-dialog.menu-window.workshop-window .gear-slot img{width:100%;height:100%;object-fit:contain}html body #bag-dialog.menu-window.workshop-window .gear-slot p{display:none}html body #bag-dialog.menu-window.workshop-window .gear-slot button{padding:0 4px;min-height:14px;font-size:9px;box-shadow:none;border:0;background:transparent;line-height:14px;margin:0}html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(1){grid-area:1/1}html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(2){grid-area:1/3}html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(3){grid-area:4/2;width:66px;justify-self:center}html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(4){grid-area:2/1}html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(5){grid-area:2/3}html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(6){grid-area:3/1}html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(7){grid-area:3/3} html body #bag-dialog.menu-window.workshop-window #shared-character-preview{position:absolute;inset:0 52px 65px;width:auto;height:auto;min-height:0;padding:0;overflow:hidden;z-index:1;border:0;background:transparent}html body #bag-dialog.menu-window.workshop-window #character-preview{width:100%;height:100%;max-height:none;min-height:0}html body #bag-dialog.menu-window.workshop-window .preview-controls{display:none}html body #bag-dialog.menu-window.workshop-window #equipment-stat{font-size:12px;text-align:center;margin:5px 0}html body #bag-dialog.menu-window.workshop-window .bag-items{min-width:0;min-height:0}html body #bag-dialog.menu-window.workshop-window .bag-grid-title{font-size:12px;margin:0;padding:3px}html body #bag-dialog.menu-window.workshop-window .bag-filters{gap:3px;flex-wrap:wrap;margin:3px 0;padding:0}html body #bag-dialog.menu-window.workshop-window .bag-filters button{font-size:10px;padding:4px 6px;min-height:25px;border-radius:7px;box-shadow:none}html body #bag-dialog.menu-window.workshop-window .bag-scroll{height:270px;overflow:auto;padding:3px}html body #bag-dialog.menu-window.workshop-window .inventory-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}html body #bag-dialog.menu-window.workshop-window .inventory-slot{aspect-ratio:1;width:auto;height:auto;min-height:0;padding:4px;border-radius:9px}html body #bag-dialog.menu-window.workshop-window .slot-qty{font-size:10px}html body #bag-dialog.menu-window.workshop-window .bag-hint{font-size:10px;margin:4px 0}#inventory [data-usable=true]{touch-action:none}html body #bag-dialog.menu-window.workshop-window .item-tooltip{font-size:12px;max-width:220px} .item-drag-ghost{position:fixed;width:48px;height:48px;z-index:20000;pointer-events:none;opacity:.85;background:#ffefb8;border:2px solid #be8d35;border-radius:10px;padding:4px}.item-drag-ghost img{width:100%;height:100%}.item-drag-ghost .slot-qty{display:none}.actionbar .item-drop-target{outline:3px solid #ffe38a;filter:brightness(1.3)} html body #character-dialog.menu-window.workshop-window{width:min(780px,96vw);max-height:90dvh}html body #character-dialog.menu-window.workshop-window .menu-body{padding:12px}html body #character-dialog.menu-window.workshop-window .character-tabs{margin:5px 0;padding:0}html body #character-dialog.menu-window.workshop-window .character-tabs button{padding:5px 15px;font-size:12px;min-height:28px}html body #character-dialog.menu-window.workshop-window #character-level{font-size:12px;margin:0;padding:5px 10px}html body #character-dialog.menu-window.workshop-window .character-stats-layout{grid-template-columns:230px minmax(0,1fr);gap:12px}html body #character-dialog.menu-window.workshop-window .character-weapon-card{padding:8px;min-width:0}html body #character-dialog.menu-window.workshop-window #character-preview-slot{height:235px;min-height:0}html body #character-dialog.menu-window.workshop-window #shared-character-preview{height:235px;min-height:0;padding:0}html body #character-dialog.menu-window.workshop-window #character-preview{height:210px;min-height:0}html body #character-dialog.menu-window.workshop-window .preview-controls{height:25px;font-size:10px}html body #character-dialog.menu-window.workshop-window .preview-controls button{padding:0;width:24px;height:24px;min-height:0}html body #character-dialog.menu-window.workshop-window #character-attack{font-size:28px;padding:5px;margin:4px 0}html body #character-dialog.menu-window.workshop-window #character-bonus{font-size:10px}html body #character-dialog.menu-window.workshop-window #character-weapon{font-size:12px;margin:3px}html body #character-dialog.menu-window.workshop-window .stat-card{padding:10px;font-size:12px}html body #character-dialog.menu-window.workshop-window .stat-card strong{font-size:15px}html body #character-dialog.menu-window.workshop-window .character-details{gap:7px} #hunt-bot-dialog{width:min(650px,96vw);max-height:90dvh}#hunt-bot-dialog .menu-body{padding:12px;font-size:13px}#hunt-bot-dialog p{margin:6px 0}#hunt-bot-dialog fieldset{padding:8px;margin:8px 0;border:1px solid #c9b57c;border-radius:10px}#hunt-bot-dialog input:not([type=checkbox]):not([type=range]){background:#fffaf0!important;color:#483c27!important;border:1px solid #c9ae77!important;box-shadow:none!important;outline:0!important;padding:6px 9px;min-height:32px;font-size:14px}#hunt-bot-dialog input:focus-visible{outline:2px solid #bb944a!important;outline-offset:2px}#hunt-bot-dialog input[name=returnAt]{width:62px}#hunt-bot-dialog input[type=range]{width:100%;accent-color:#b99145;padding:0;background:transparent}#hunt-bot-dialog input[type=checkbox]{accent-color:#b99145}#hunt-bot-dialog .bot-fields{gap:9px}#hunt-bot-dialog .bot-actions{padding:8px;gap:7px}#hunt-bot-dialog .bot-actions button{padding:7px 14px;min-height:34px;font-size:13px}#hunt-bot-dialog fieldset small{display:block;font-size:11px}#hunt-bot-toggle{position:absolute;left:calc(50% + 38px);top:8px;pointer-events:auto;padding:5px 9px;min-height:30px;border-radius:9px;font-size:12px;color:#f8efce;background:#224e49d0;border:1px solid #c5a55d}#hunt-bot-toggle[data-active=true]{background:#77432bd0}#mp_potion>span{color:#81d5ff} @media(max-height:550px){html body #bag-dialog.menu-window.workshop-window[open]{inset:5px 8px auto auto;width:min(680px,calc(100vw - 16px));height:calc(100dvh - 80px)}html body #bag-dialog.menu-window.workshop-window .menu-header{min-height:30px;padding:4px 9px}html body #bag-dialog.menu-window.workshop-window .menu-header h2{font-size:14px}html body #bag-dialog.menu-window.workshop-window .menu-emblem{width:24px;height:24px}html body #bag-dialog.menu-window.workshop-window .menu-body{padding:5px}html body #bag-dialog.menu-window.workshop-window .equipment-board{height:236px;grid-template-rows:repeat(4,53px);grid-template-columns:55px 1fr 55px;gap:3px}html body #bag-dialog.menu-window.workshop-window .gear-slot>div{width:29px;height:29px}html body #bag-dialog.menu-window.workshop-window .gear-slot>span{font-size:9px;line-height:12px}html body #bag-dialog.menu-window.workshop-window .gear-slot button{font-size:8px;line-height:10px;min-height:10px}html body #bag-dialog.menu-window.workshop-window #shared-character-preview{inset:0 40px 45px}html body #bag-dialog.menu-window.workshop-window .bag-scroll{height:165px}html body #bag-dialog.menu-window.workshop-window .inventory-grid{grid-template-columns:repeat(6,minmax(0,1fr))}html body #bag-dialog.menu-window.workshop-window .inventory-slot{max-height:43px}html body #bag-dialog.menu-window.workshop-window .bag-summary{font-size:10px}html body #character-dialog.menu-window.workshop-window .character-stats-layout{grid-template-columns:165px 1fr}html body #character-dialog.menu-window.workshop-window #character-preview-slot,html body #character-dialog.menu-window.workshop-window #shared-character-preview{height:165px}html body #character-dialog.menu-window.workshop-window #character-preview{height:145px}html body #character-dialog.menu-window.workshop-window .menu-body{padding:7px}#hunt-bot-open{top:3px}#hunt-bot-toggle{top:3px;font-size:10px;min-height:25px;padding:3px 6px}.actionbar .skill{width:40px;min-width:40px}} @media(max-width:560px) and (orientation:portrait){html body #bag-dialog.menu-window.workshop-window .bag-layout{grid-template-columns:1fr}html body #bag-dialog.menu-window.workshop-window[open]{height:calc(100dvh - 120px)}html body #character-dialog.menu-window.workshop-window .character-stats-layout{grid-template-columns:1fr}} html body #character-dialog.menu-window.workshop-window .character-values{gap:7px;margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}html body #character-dialog.menu-window.workshop-window .character-values>div{padding:10px;min-height:0}html body #character-dialog.menu-window.workshop-window .character-values dt{font-size:11px;margin:0 0 4px}html body #character-dialog.menu-window.workshop-window .character-values dd{font-size:13px;margin:0;line-height:1.5;overflow-wrap:anywhere}html body #character-dialog.menu-window.workshop-window #character-xp{font-size:12px}html body #character-dialog.menu-window.workshop-window .journal-open{margin:8px 0;padding:6px 12px;min-height:30px;font-size:12px} html.touch-device #hunt-bot-toggle{top:52px;left:42%;z-index:12;font-size:10px;padding:3px 6px;min-height:26px} html body #bag-dialog.menu-window.workshop-window .gear-slot{align-self:stretch;height:100%;min-height:0;justify-content:center;box-sizing:border-box;overflow:hidden}html body #bag-dialog.menu-window.workshop-window .gear-slot button{flex-shrink:0}html body #bag-dialog.menu-window.workshop-window .gear-slot .item-art{width:100%;height:100%;max-height:100%;margin:0}html body #bag-dialog.menu-window.workshop-window .inventory-grid{grid-auto-rows:48px;align-content:start}html body #bag-dialog.menu-window.workshop-window .inventory-slot{height:48px;max-height:48px;aspect-ratio:auto}html body #bag-dialog.menu-window.workshop-window .bag-scroll{flex:none}html body #bag-dialog.menu-window.workshop-window .inventory-slot img{max-height:38px;width:100%;height:100%;object-fit:contain} html.touch-device #hud .bottom .actionbar{grid-template-columns:repeat(7,40px);grid-template-rows:44px;gap:4px}html.touch-device #hud .actionbar .skill,html.touch-device #hud #meditate{width:40px;min-width:40px} #hunt-bot-toggle{left:calc(43% + 62px)}html.touch-device #hud #hunt-bot-toggle{left:208px;top:50px;z-index:35;width:50px} @media(max-height:550px){html body #bag-dialog.menu-window.workshop-window .inventory-grid{grid-auto-rows:38px}html body #bag-dialog.menu-window.workshop-window .inventory-slot{height:38px;max-height:38px}html body #bag-dialog.menu-window.workshop-window .inventory-slot img{max-height:28px}html body #bag-dialog.menu-window.workshop-window .bag-scroll{height:165px}} html body #bag-dialog.menu-window.workshop-window #shared-character-preview{display:flex;bottom:95px;grid-area:auto}html body #bag-dialog.menu-window.workshop-window #character-preview{display:block}html body #character-dialog.menu-window.workshop-window #shared-character-preview{display:flex} @media(max-height:550px){html body #bag-dialog.menu-window.workshop-window #shared-character-preview{bottom:65px}} /* 0.1.152 — movable windows and compact independent equipment */ .window-drag-handle{cursor:grab;user-select:none}.window-drag-handle:active{cursor:grabbing} html body #character-dialog{position:fixed;margin:auto;max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px)} html body #hunt-bot-dock{position:fixed;top:88px;left:8px;z-index:35;width:66px;padding:3px;border:1px solid #e6c37b99;border-radius:13px;background:#193e3b99;box-shadow:0 3px 14px #10292244;display:flex;flex-direction:column;gap:2px;pointer-events:auto} html body #hunt-bot-dock[hidden]{display:none} html body #hunt-bot-dock #hunt-bot-open,html body #hunt-bot-dock #hunt-bot-toggle{position:static;inset:auto;transform:none;width:100%;height:auto;min-width:0;margin:0;padding:2px;border:0;border-radius:8px;box-shadow:none;background:transparent;display:flex;align-items:center;justify-content:center} html body #hunt-bot-dock #hunt-bot-open{flex-direction:column;font-size:9px;gap:0} html body #hunt-bot-dock #hunt-bot-open img{width:36px;height:36px} html body #hunt-bot-dock #hunt-bot-toggle{font-size:11px;line-height:22px;background:#d9edcbdd;color:#214c3b;font-weight:700} html body #hunt-bot-dock #hunt-bot-toggle[data-active=true]{background:#f7d58ddd;color:#674320} html body #hunt-bot-dialog{position:fixed;width:580px;max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px);margin:auto;z-index:45} html body #hunt-bot-dialog .menu-body{padding:12px 16px;overflow-y:auto} html body #hunt-bot-dialog .bot-license{font-size:11px;margin:0;color:#78674b} html body #hunt-bot-dialog .bot-state{font-size:12px;margin:5px 0 10px;padding:7px 10px;border-radius:7px;background:#ecdebb88} html body #hunt-bot-dialog .bot-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px} html body #hunt-bot-dialog fieldset{margin:10px 0;padding:9px 12px;border:1px solid #b9a27366;border-radius:9px;background:#fff9e733} html body #hunt-bot-dialog label{font-size:12px;line-height:1.65} html body #hunt-bot-dialog legend{font-weight:700;font-size:12px} html body #hunt-bot-dialog input[type=number]{background:#fff9ec;color:#59492d;border:1px solid #bea571;border-radius:6px;box-shadow:none;padding:4px 7px;height:29px;width:64px;max-width:100%} html body #hunt-bot-dialog input:focus{outline:2px solid #be9658;outline-offset:1px} html body #hunt-bot-dialog .bot-return-note,html body #hunt-bot-dialog small,html body #hunt-bot-dialog .muted{font-size:10px;line-height:1.6;margin:5px 0;color:#776548} html body #hunt-bot-dialog .bot-actions{position:sticky;bottom:-12px;display:flex;justify-content:flex-end;gap:8px;padding:8px 0;background:#f9f0d8ed} html body .actionbar .hotbar-slot{touch-action:none;user-select:none;position:relative} html body .actionbar .hotbar-slot>img{width:28px;height:28px;object-fit:contain} html body .actionbar .hotbar-empty{background:#1b3e3725;border:1px dashed #d7c49888;box-shadow:none} html body .actionbar .hotbar-empty>span{font-size:20px;opacity:.3} html body .actionbar .hotbar-slot[data-action=meditate]>span{font-size:25px} html body .actionbar .hotbar-slot[data-action=meditate][aria-pressed=true]{box-shadow:0 0 10px #e7efb2} html body .actionbar .hotbar-slot em{pointer-events:none} html body #hotbar-action-sources[hidden]{display:none!important} html body #bag-dialog.menu-window.workshop-window .equipment-board{align-content:center;justify-content:center;grid-template-columns:72px minmax(110px,1fr) 72px;grid-template-rows:repeat(3,70px) 60px;gap:6px;min-height:308px;height:100%;padding:8px} html body #bag-dialog.menu-window.workshop-window .gear-slot{width:100%;height:100%;min-height:0;padding:3px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;overflow:hidden} html body #bag-dialog.menu-window.workshop-window .gear-slot>span{font-size:9px;line-height:12px;white-space:nowrap} html body #bag-dialog.menu-window.workshop-window .gear-slot>button{font-size:10px;line-height:15px;padding:0 2px;min-height:15px;white-space:nowrap} html body #bag-dialog.menu-window.workshop-window .gear-slot>div{width:36px;height:36px} html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(3){width:72px;justify-self:center} html body #bag-dialog.menu-window.workshop-window #shared-character-preview{inset:10px 82px 80px;display:flex!important;align-items:center;justify-content:center} html body #bag-dialog.menu-window.workshop-window #equipment-stat{font-size:10px;line-height:1.5;margin:6px 0 0;text-align:center} html body #bestiary-dialog{width:850px;max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px)} html body #bestiary-dialog .menu-body{padding:12px 16px;overflow:auto} html body #bestiary-total{font-size:12px;margin:0 0 9px} html body #bestiary-filter{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap} html body #bestiary-filter button{padding:4px 12px;font-size:12px;border-radius:20px} html body #bestiary-filter [aria-pressed=true]{background:#466852;color:#fff6d9} html body #bestiary-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start} html body .bestiary-card{padding:10px;border:1px solid #b8a07366;border-radius:12px;background:#fff9e799;box-shadow:0 2px 5px #76613f11;min-width:0} html body .bestiary-card header{display:flex;align-items:center;gap:8px;margin-bottom:8px} html body .bestiary-card header>div{flex:1;min-width:0} html body .bestiary-card h3{font-size:13px;line-height:1.4;margin:0;overflow-wrap:anywhere} html body .bestiary-card header small{font-size:10px;color:#8b633a} html body .bestiary-emblem{position:static;display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;font-size:22px;border-radius:10px;background:#c8d8aa;color:#407f5f;box-shadow:inset 0 1px 6px #fff9} html body .bestiary-emblem.fox{background:#f0d5a6;color:#ae6f32}html body .bestiary-emblem.golem{background:#ccc8b9;color:#736554} html body .bestiary-card .bestiary-count{font-size:9px;line-height:1.4;margin:0;text-align:right;color:#827254} html body .bestiary-card .bestiary-count b{font-size:15px;color:#476a52} html body .bestiary-card dl{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:0;padding:6px 0;border-block:1px solid #d8c9a5} html body .bestiary-card dl div{text-align:center}html body .bestiary-card dt{font-size:9px;color:#8b7b60}html body .bestiary-card dd{font-size:12px;font-weight:bold;margin:0} html body .bestiary-drops{font-size:10px;line-height:1.6;margin:7px 0;color:#74634b} html body .bestiary-card details{font-size:10px;margin:5px 0} html body .bestiary-card ul{padding-left:16px;max-height:150px;overflow:auto} html body .bestiary-card li{margin:5px 0}.bestiary-card li small{color:#967e48} html body .bestiary-card footer{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px} html body .bestiary-card footer button{font-size:10px;padding:4px 7px;min-height:26px;border-radius:7px} @media(max-width:900px),(max-height:550px){ html.touch-device #hunt-bot-dock{top:64px;left:6px;width:54px} html.touch-device #hunt-bot-dock #hunt-bot-open img{width:28px;height:28px} html.touch-device #hunt-bot-dock #hunt-bot-toggle{font-size:10px;line-height:18px} html body #hunt-bot-dialog .menu-body{padding:8px 12px} html body #hunt-bot-dialog .menu-header{min-height:42px} html body #bag-dialog.menu-window.workshop-window .equipment-board{grid-template-columns:62px minmax(85px,1fr) 62px;grid-template-rows:repeat(3,51px) 48px;gap:4px;min-height:226px;padding:5px} html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(3){width:62px} html body #bag-dialog.menu-window.workshop-window .gear-slot>div{width:27px;height:27px} html body #bag-dialog.menu-window.workshop-window .gear-slot>span{font-size:8px;line-height:9px} html body #bag-dialog.menu-window.workshop-window .gear-slot>button{font-size:9px;line-height:11px;min-height:11px} html body #bag-dialog.menu-window.workshop-window #shared-character-preview{inset:8px 70px 65px} html body #bestiary-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:480px){html body #bestiary-list{grid-template-columns:1fr}} html body #hunt-bot-dialog #bot-form .bot-fields{grid-template-columns:1fr 1fr} html body #bag-dialog.menu-window.workshop-window .equipment-board{height:320px;min-height:0} @media(max-height:550px){ html body #bag-dialog.menu-window.workshop-window[open]{height:calc(100dvh - 62px)} html body #bag-dialog.menu-window.workshop-window .equipment-board{height:208px;min-height:0;grid-template-rows:repeat(3,46px) 42px} html body #bag-dialog.menu-window.workshop-window #shared-character-preview{inset:5px 70px 54px} html body #bag-dialog.menu-window.workshop-window .gear-slot>div{width:25px;height:25px} } /* Jade Fellowship: all positions are bounded and only coordinates persist locally. */ html body #hunt-bot-dock{width:108px;flex-direction:row;align-items:stretch;gap:3px} html body #hunt-bot-dock #hunt-bot-open{flex:1;min-width:45px} html body #hunt-bot-dock #hunt-bot-toggle{width:45px;flex:0 0 45px;min-height:38px;line-height:1.4;border-left:1px solid #e9d79b66} html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(8){grid-area:4/1} html body #bag-dialog.menu-window.workshop-window .gear-slot:nth-child(9){grid-area:4/3} html body #bag-dialog.menu-window.workshop-window .reserved-gear{opacity:.65;border-style:dashed;background:#c9d9c54a} html body #bag-dialog.menu-window.workshop-window .reserved-gear>div{display:grid;place-items:center;font-size:21px;color:#6d8972;background:transparent} #party-lines{height:120px;overflow:auto;overflow-wrap:anywhere;font-size:11px;line-height:1.7;color:#b5e7ff}#party-lines[hidden]{display:none} #party-hud{position:fixed;pointer-events:auto;left:8px;top:155px;width:230px;background:#183e37bf;color:#f4e8c6;border:1px solid #e0c58188;border-radius:12px;padding:6px;z-index:34;box-shadow:0 4px 18px #10242144} #party-hud[hidden],#party-invitation[hidden]{display:none} #party-hud header{display:flex;align-items:center;justify-content:space-between;padding:2px 4px;font-size:12px} #party-hud button{padding:3px 6px;min-height:24px;border:0;box-shadow:none;background:#f9edcb20;color:inherit;font-size:10px;border-radius:6px} #party-hud .party-members{max-height:240px;overflow:auto;margin:5px 0;display:grid;gap:4px} #party-hud .party-members>div{display:grid;grid-template-columns:1fr 22px;gap:2px;padding:3px;background:#102c352a;border-radius:7px} #party-hud .party-members>div>button:first-child{grid-column:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent} #party-hud meter{grid-column:1;width:100%;height:7px}#party-hud .party-members>div>button:last-child:not(:first-child){grid-column:2;grid-row:1/3} #party-hud footer{display:flex;justify-content:space-between;gap:4px}#party-hud.folded .party-members,#party-hud.folded footer{display:none} #party-invitation{position:fixed;pointer-events:auto;left:50%;top:12px;transform:translateX(-50%);z-index:75;background:#f7edccf5;color:#244b41;border:1px solid #dcb55e;border-radius:12px;padding:10px 18px;box-shadow:0 5px 25px #1239;text-align:center;max-width:calc(100vw - 20px)}#party-invitation p{margin:0 0 6px;font-size:13px}#party-invitation button{font-size:12px;padding:6px 15px} #legacy-class{padding:8px;border:1px solid #bba26b;border-radius:8px;font-size:12px}#legacy-class select{width:100%;margin-bottom:7px}#roster-class-info{font-size:11px;line-height:1.5;margin:4px 0 7px;color:#79653f} @media(max-height:550px){#party-hud{left:120px;top:64px;width:195px}#party-hud .party-members{max-height:125px}#party-lines{height:70px}html body #hunt-bot-dock{width:98px}html body #hunt-bot-dock #hunt-bot-open{min-width:36px}} html.touch-device body #hunt-bot-dock{width:98px;flex-direction:row}html.touch-device body #hunt-bot-dock #hunt-bot-open{min-width:36px} #party-hud{z-index:40} /* v154: unframed item art and quiet transparent hotbar surfaces. */ html body #bag-dialog.menu-window.workshop-window .inventory-slot, html body #bag-dialog.menu-window.workshop-window .gear-slot>div{background:transparent;box-shadow:none} html body #bag-dialog.menu-window.workshop-window .inventory-slot{position:relative;border:1px solid #ac925b44;padding:2px} html body #bag-dialog.menu-window.workshop-window .inventory-slot:hover, html body #bag-dialog.menu-window.workshop-window .inventory-slot:focus-visible{background:#e4c98520;border-color:#b38936;outline-offset:1px} html body #bag-dialog.menu-window.workshop-window .slot-qty{position:absolute;right:1px;bottom:0;left:auto;top:auto;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;line-height:1.1;font-size:10px;font-weight:700;color:#fffefa;text-shadow:-1px -1px 1px #42301e,1px -1px 1px #42301e,-1px 1px 1px #42301e,1px 1px 1px #42301e;pointer-events:none;z-index:2} html body #bag-dialog.menu-window.workshop-window .item-art{background:transparent;border:0;box-shadow:none;border-radius:0} html body #hud .bottom .actionbar{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none} html body #hud .actionbar .skill, html.touch-device body #hud .actionbar .skill, html body #hud .actionbar #meditate{background:linear-gradient(145deg,#31594b16,#0e353024);border:1px solid #dbc58066;box-shadow:inset 0 1px #fff6d422;backdrop-filter:none} html body #hud .actionbar .skill:hover,html body #hud .actionbar .skill:focus-visible{background:#d5c38928;border-color:#f1da93} html body #hud .actionbar .skill kbd,html body #hud .actionbar .skill small{background:transparent;box-shadow:none;text-shadow:0 1px 2px #142b25} html body #hud .actionbar .hotbar-empty{background:transparent;border-style:dashed} html body #hud .actionbar .skill em{background:#14251d80} .class-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.class-card{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid #e4c88d;border-radius:10px;background:#fffaf0}.class-card[data-current=true]{border-color:#b98a3d;box-shadow:inset 0 0 0 1px #b98a3d}.class-card small{flex:1;font-size:12px;opacity:.8}.class-card button{margin-top:4px}#class-current{font-weight:600} /* 0.1.171 companion window: tidy cards, soft toggles and chips */ html body #hunt-bot-dialog{width:min(560px,calc(100vw - 12px));border-radius:18px;background:#fff6df;border:1px solid #e2c98f;box-shadow:0 18px 50px #3a2a1255} html body #hunt-bot-dialog .menu-header{background:linear-gradient(180deg,#fff3cf,#f6dfa6);border-bottom:1px solid #e2c98f;border-radius:18px 18px 0 0} html body #hunt-bot-dialog .menu-body{background:linear-gradient(180deg,#fffaf0,#fbefd2);padding:12px 14px 0;font-size:13px;color:#5e4a2c} html body #hunt-bot-dialog .bot-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px} html body #hunt-bot-dialog .bot-license{margin:0;padding:4px 10px;border-radius:999px;background:#f3e3bb;color:#7a6034;font-size:11px} html body #hunt-bot-dialog .bot-state{margin:0;padding:4px 10px;border-radius:999px;background:#dff1e6;color:#2d7a5f;font-size:12px;font-weight:600} html body #hunt-bot-dialog .bot-state:empty{display:none} html body #hunt-bot-dialog .bot-card{background:#fffdf7;border:1px solid #efdcae;border-radius:14px;padding:10px 12px;margin:0 0 10px;box-shadow:0 2px 0 #eedbb0} html body #hunt-bot-dialog .bot-card h3{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:14px;color:#6b4e23} html body #hunt-bot-dialog .bot-card h3 i{font-style:normal;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;background:linear-gradient(180deg,#fff0c8,#f4d98f);box-shadow:inset 0 -2px 0 #e0bd6c;font-size:15px} html body #hunt-bot-dialog .bot-card h3 small{font-weight:400;font-size:11px;color:#9a7d4f} html body #hunt-bot-dialog .bot-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px} html body #hunt-bot-dialog .bot-fields>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#7a6038} html body #hunt-bot-dialog .bot-fields>.bot-wide{grid-column:1/-1} html body #hunt-bot-dialog output{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#f4e1b3;color:#6b4e23;font-weight:700;font-size:12px} html body #hunt-bot-dialog input:not([type=checkbox]):not([type=range]){min-height:30px;padding:4px 8px;border-radius:9px!important;font-size:13px;width:100%;max-width:120px} html body #hunt-bot-dialog .bot-unit{display:flex;align-items:center;gap:5px} html body #hunt-bot-dialog .bot-unit input{max-width:72px!important} html body #hunt-bot-dialog .bot-mp{justify-content:space-between} html body #hunt-bot-dialog input[type=range]{accent-color:#c89a45;height:22px} html body #hunt-bot-dialog .bot-chips{display:flex;flex-wrap:wrap;gap:6px} html body #hunt-bot-dialog .bot-chips label{cursor:pointer} html body #hunt-bot-dialog .bot-chips input{position:absolute;opacity:0;pointer-events:none} html body #hunt-bot-dialog .bot-chips span{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid #e3c98c;background:#fff8e6;color:#7a6038;font-size:12px;transition:background .15s,color .15s} html body #hunt-bot-dialog .bot-chips span b{font-weight:600;color:#a88a55;font-size:11px} html body #hunt-bot-dialog .bot-chips input:checked+span{background:linear-gradient(180deg,#4fb592,#2f8f70);border-color:#2f8f70;color:#fff;box-shadow:0 2px 0 #1f6b53} html body #hunt-bot-dialog .bot-chips input:checked+span b{color:#e6fff4} html body #hunt-bot-dialog .bot-chips input:focus-visible+span{outline:2px solid #bb944a;outline-offset:2px} html body #hunt-bot-dialog details{margin-top:8px} html body #hunt-bot-dialog details summary{cursor:pointer;font-size:12px;color:#7a6038} html body #hunt-bot-dialog details summary small{color:#a88a55} html body #hunt-bot-dialog details .bot-chips{margin-top:8px;max-height:140px;overflow:auto;padding:2px} html body #hunt-bot-dialog .bot-toggles{display:flex;flex-direction:column;gap:6px} html body #hunt-bot-dialog .bot-switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;color:#6b5231} html body #hunt-bot-dialog .bot-switch input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 34px;width:34px;height:20px;margin:0;border-radius:999px;background:#e5d6b4;position:relative;cursor:pointer;transition:background .2s;box-shadow:inset 0 1px 2px #0002} html body #hunt-bot-dialog .bot-switch input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .2s} html body #hunt-bot-dialog .bot-switch input[type=checkbox]:checked{background:#3fa382} html body #hunt-bot-dialog .bot-switch input[type=checkbox]:checked::after{transform:translateX(14px)} html body #hunt-bot-dialog .bot-switch input[type=checkbox]:focus-visible{outline:2px solid #bb944a;outline-offset:2px} html body #hunt-bot-dialog .bot-return input[type=number]{display:inline-block;width:52px!important;max-width:52px!important;min-height:26px!important;margin:0 3px;text-align:center} html body #hunt-bot-dialog .bot-return-note{margin:6px 0 0;font-size:11px;color:#9a7d4f} html body #hunt-bot-dialog .bot-note{margin:2px 2px 10px;font-size:11px;line-height:1.5;color:#9a7d4f} html body #hunt-bot-dialog .bot-actions{position:sticky;bottom:0;display:flex;gap:8px;justify-content:flex-end;margin:0 -14px;padding:10px 14px;background:linear-gradient(180deg,#fbefd2ee,#f7e5bb);border-top:1px solid #e8d19b} html body #hunt-bot-dialog .bot-actions button{min-height:36px;padding:7px 16px;border-radius:12px;font-size:13px;font-weight:700;border:1px solid transparent;cursor:pointer} html body #hunt-bot-dialog .bot-actions .bot-save{background:#fffaf0;border-color:#d9bd83;color:#6b4e23} html body #hunt-bot-dialog .bot-actions .bot-start{background:linear-gradient(180deg,#58c29c,#2f8f70);color:#fff;box-shadow:0 3px 0 #1f6b53} html body #hunt-bot-dialog .bot-actions .bot-stop{background:#fbe3dc;border-color:#e8b3a4;color:#9b4a36} html body #hunt-bot-dialog .bot-actions button:disabled{opacity:.55;cursor:default} @media(max-width:520px){html body #hunt-bot-dialog .bot-fields{grid-template-columns:1fr}html body #hunt-bot-dialog .bot-actions button{flex:1;padding:7px 8px}} html body #hunt-bot-dialog .bot-fields>label,html body #hunt-bot-dialog .bot-switch,html body #hunt-bot-dialog .bot-chips label{margin:0} html body #hunt-bot-dialog .bot-fields>label>input,html body #hunt-bot-dialog .bot-unit input{margin:0} html body #hunt-bot-dialog .bot-wide{display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:6px} html body #hunt-bot-dialog .bot-wide output{justify-self:start;margin:0} html body #hunt-bot-dialog .bot-wide input[type=range]{grid-column:1/-1;margin:2px 0 0} html body #hunt-bot-dialog .bot-mp{gap:4px!important} html body #hunt-bot-dialog .bot-mp .bot-unit{padding-left:43px} html body #hunt-bot-dialog .bot-note{margin-bottom:14px} html body #hunt-bot-dialog .bot-card:last-of-type{margin-bottom:8px} /* 0.1.173 side menu: free-standing illustrated icons, name only on hover / focus */ html body .side-menu :is(.utility,.sound-open,.fullscreen,.logout){position:relative!important;overflow:visible!important;width:50px!important;height:50px!important;min-height:50px!important;background:none!important;border:0!important;box-shadow:none!important;transition:transform .12s;font-size:0!important;color:transparent!important;padding:0!important} #hud .side-menu #side-menu-items button::after{display:none} html body .side-menu :is(.utility,.sound-open,.fullscreen,.logout):hover{transform:translateY(-2px) scale(1.08)} html body .side-menu :is(.utility,.sound-open,.fullscreen,.logout):active{transform:scale(.94)} html body .side-menu :is(#map-open,#quest-menu,#character-open,#bag-open,#help-open,#skills-open,#journal-open,#item-shop-open,#guild-open,#mail-open,#sound-open,#fullscreen,#logout)::before{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);width:50px!important;height:50px!important;filter:drop-shadow(0 3px 3px #0007)!important} html body .side-menu .utility small{display:none!important} #hud .side-menu #side-menu-items :is(#map-open,#quest-menu,#character-open,#bag-open,#help-open,#skills-open,#journal-open,#item-shop-open,#guild-open,#mail-open,#sound-open,#fullscreen,#logout)::after{display:block;inset:auto;border:0;box-shadow:none;position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);padding:4px 10px;border-radius:999px;background:#14231fe0;border:1px solid #ffe3a366;font:700 12px/16px system-ui,"Noto Sans Thai",sans-serif;color:#fff4d2;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s} #hud .side-menu #side-menu-items :is(#map-open,#quest-menu,#character-open,#bag-open,#help-open,#skills-open,#journal-open,#item-shop-open,#guild-open,#mail-open,#sound-open,#fullscreen,#logout):is(:hover,:focus-visible)::after{opacity:1} #hud .side-menu #side-menu-items #map-open::after{content:"แผนที่ [M]"}#hud .side-menu #side-menu-items #quest-menu::after{content:"ภารกิจ [Q]"}#hud .side-menu #side-menu-items #character-open::after{content:"ตัวละคร [C]"}#hud .side-menu #side-menu-items #bag-open::after{content:"กระเป๋า [I]"}#hud .side-menu #side-menu-items #help-open::after{content:"วิธีเล่น [H]"}#hud .side-menu #side-menu-items #journal-open::after{content:"มอนสเตอร์ [B]"}#hud .side-menu #side-menu-items #sound-open::after{content:"ภาพ / เสียง"}#hud .side-menu #side-menu-items #fullscreen::after{content:"เต็มจอ"}#hud .side-menu #side-menu-items #logout::after{content:"ออกจากเกม"} html body .side-adventure,html body #hud .side-system{gap:8px!important} #hud .side-menu #side-menu-items{padding-top:4px!important;padding-bottom:4px!important;overflow:visible!important} /* 0.1.171 hotbar: item count badge on potion/box slots */ html body .actionbar .skill .hotbar-count{position:absolute;right:3px;bottom:2px;z-index:2;min-width:14px;padding:0 3px;border-radius:7px;background:#1b2f2bcc;color:#fff4d2;font:700 11px/15px system-ui,sans-serif;text-align:center;text-shadow:0 1px 1px #000;pointer-events:none} html body .actionbar .skill .hotbar-count[data-empty=true]{color:#ff9d8a} /* ===== 0.1.172 window theme: one tidy, compact look for every menu window ===== */ html body dialog.menu-window{--w-bg:#fffaf0;--w-card:#fffdf8;--w-line:#ecd9ad;--w-ink:#4d3a22;--w-soft:#8a6f47;--w-gold:#c8952f;--w-jade:#2f8f70; background:var(--w-bg)!important;color:var(--w-ink)!important;border:1px solid #e3c98d!important;border-radius:18px!important;box-shadow:0 22px 60px #1a120866,0 0 0 4px #fff4d855!important;overflow:hidden} html body dialog.menu-window[open]{display:flex!important;flex-direction:column} html body dialog.menu-window>.menu-header{display:flex;align-items:center;gap:10px;padding:10px 14px!important;min-height:0!important;background:linear-gradient(180deg,#fff2c9,#f5dc9e)!important;border-bottom:1px solid #e3c98d!important;flex:none} html body dialog.menu-window .menu-emblem{width:36px!important;height:36px!important;padding:3px;border-radius:12px;background:radial-gradient(circle at 50% 35%,#46574f,#14231f 75%);box-shadow:0 2px 4px #0004;object-fit:contain} html body dialog.menu-window .menu-title{flex:1;min-width:0;line-height:1.15} html body dialog.menu-window .menu-title .eyebrow{display:block;font-size:9.5px!important;letter-spacing:.14em;color:#a2803f!important;margin:0 0 1px} html body dialog.menu-window .menu-title h2{margin:0!important;font-size:18px!important;color:#5a3d17!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body dialog.menu-window .menu-close{flex:none;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;border-radius:11px!important;background:#fffaf0!important;border:1px solid #d9bd83!important;color:#6b4e23!important;font-size:22px!important;line-height:1!important;box-shadow:0 2px 0 #d9bd83!important} html body dialog.menu-window .menu-close:hover{background:#fff!important} html body dialog.menu-window>.menu-body{flex:1;min-height:0;overflow:auto;padding:12px 14px 14px!important;background:linear-gradient(180deg,#fffaf0,#fbf0d6)!important;font-size:13px;color:var(--w-ink)} html body dialog.menu-window .muted{color:var(--w-soft)!important} html body dialog.menu-window input,html body dialog.menu-window select{color-scheme:light} /* tabs as pills */ html body dialog.menu-window :is(.bag-filters,.vendor-tabs,.character-tabs){display:flex;flex-wrap:wrap;gap:6px!important;padding:0 0 10px!important;margin:0 0 10px!important;border-bottom:1px dashed var(--w-line)!important} html body dialog.menu-window :is(.bag-filters,.vendor-tabs,.character-tabs) button{flex:0 0 auto!important;padding:5px 12px!important;min-height:28px!important;border-radius:999px!important;font-size:12px!important;background:#fff8e6!important;border:1px solid #e3c98c!important;color:#7a6038!important;box-shadow:none!important} html body dialog.menu-window :is(.bag-filters,.vendor-tabs,.character-tabs) button:is([aria-pressed=true],.active){background:linear-gradient(180deg,#4fb592,#2f8f70)!important;border-color:#2f8f70!important;color:#fff!important;box-shadow:0 2px 0 #1f6b53!important} /* primary buttons */ html body dialog.menu-window button.primary{border-radius:12px!important;background:linear-gradient(180deg,#ffd873,#e9a93a)!important;border:1px solid #c98a24!important;color:#4d2f08!important;font-weight:700;box-shadow:0 3px 0 #b27a1c!important;min-height:36px} /* ---------- bag ---------- */ html body #bag-dialog{width:min(900px,calc(100vw - 16px))!important;max-height:calc(var(--view-height,100dvh) - 16px)!important} html body #bag-dialog .bag-summary{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;padding:6px 12px;border-radius:999px;background:#f5e6bf;font-size:12px;color:#7a6034} html body #bag-dialog .bag-summary b{color:#8a5a12} html body #bag-dialog .bag-layout{display:grid!important;grid-template-columns:minmax(300px,380px) 1fr!important;gap:12px!important;align-items:start} html body #bag-dialog .equipment-pane{background:linear-gradient(180deg,#fdf4dc,#f3e2b8)!important;border:1px solid var(--w-line)!important;border-radius:16px!important;padding:10px!important;margin:0} html body #bag-dialog .equipment-pane>h3{margin:0 0 6px;font-size:12px;color:#8a6a35;text-align:center;letter-spacing:.06em} html body #bag-dialog .equipment-board{gap:6px!important} html body #bag-dialog .gear-slot{background:#fffdf7!important;border:1px solid #ead3a0!important;border-radius:12px!important;padding:4px 3px 5px!important;box-shadow:0 2px 0 #ead3a0;min-height:0!important;transition:transform .12s,box-shadow .12s} html body #bag-dialog .gear-slot>span{font-size:10px!important;color:#9a7b48!important} html body #bag-dialog .gear-slot>div{width:40px!important;height:40px!important;margin:2px auto!important;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fffaf0,#f1dfb4);border:1px solid #e0c286;display:grid;place-items:center;overflow:hidden} html body #bag-dialog .gear-slot>div img{width:34px;height:34px;object-fit:contain} html body #bag-dialog .gear-slot>p{display:none!important} html body #bag-dialog .gear-slot>button{min-height:22px!important;padding:2px 8px!important;font-size:10.5px!important;border-radius:999px!important;background:#fff4dc!important;border:1px solid #e0c286!important;color:#7a5a2a!important;box-shadow:none!important} html body #bag-dialog .gear-slot.reserved-gear{opacity:.55;border-style:dashed!important;box-shadow:none} html body #bag-dialog .gear-slot.item-drop-target,html body #bag-dialog .character-preview-drop.item-drop-target{transform:scale(1.05);box-shadow:0 0 0 3px #3fa382,0 4px 10px #3fa38255!important} html body #bag-dialog .character-pane{border-radius:14px;background:radial-gradient(ellipse at 50% 70%,#fff8e4,#f1dfb2 80%)!important} html body #bag-dialog #equipment-stat{margin:8px 0 0!important;padding:6px 10px;border-radius:10px;background:#fffaf0;border:1px solid var(--w-line);font-size:12px;text-align:center;color:#6b4e23} html body #bag-dialog .equipment-pane>.muted{font-size:10.5px;text-align:center;margin:4px 0 0} html body #bag-dialog .bag-items{background:var(--w-card);border:1px solid var(--w-line);border-radius:16px;padding:10px 10px 8px;min-width:0} html body #bag-dialog .bag-grid-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:13px} html body #bag-dialog .bag-grid-title span{font-size:11px;padding:2px 9px;border-radius:999px;background:#f5e6bf;color:#7a6034} html body #bag-dialog .bag-scroll{max-height:min(46vh,380px)!important;overflow:auto;padding:2px;border-radius:12px} html body #bag-dialog .inventory-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(56px,1fr))!important;gap:6px!important} html body #bag-dialog .inventory-slot{position:relative;aspect-ratio:1;min-height:0!important;height:auto!important;padding:4px!important;border-radius:12px!important;background:radial-gradient(circle at 50% 30%,#fffdf6,#f3e3bd)!important;border:1px solid #e4cb92!important;box-shadow:inset 0 -2px 0 #e7d2a1,0 1px 0 #fff!important;display:grid;place-items:center;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:none} html body #bag-dialog .inventory-slot:not(.empty):hover{border-color:#c8952f!important;box-shadow:0 0 0 2px #f2cf7f,inset 0 -2px 0 #e7d2a1!important} html body #bag-dialog .inventory-slot.empty{background:#f8efd9!important;border:1px dashed #ead8ae!important;box-shadow:none!important} html body #bag-dialog .inventory-slot img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 2px #0003);pointer-events:none;-webkit-user-drag:none} html body #bag-dialog .inventory-slot .slot-qty{position:absolute;right:3px;bottom:2px;font:700 10px/13px system-ui,sans-serif;padding:0 4px;border-radius:7px;background:#3b2a15cc;color:#fff4d2} html body #bag-dialog .bag-hint{margin:8px 2px 0;font-size:10.5px;color:#9a7d4f} html body dialog.menu-window .bag-item-tooltip{border-radius:12px!important;background:#fffdf5!important;border:1px solid #d9bd83!important;box-shadow:0 10px 24px #3a2a1240!important;color:#4d3a22!important;font-size:12px!important;padding:10px 12px!important} /* ---------- character / quest / help / bestiary / map / sound: cards ---------- */ html body #character-dialog{width:min(820px,calc(100vw - 16px))!important} html body #character-dialog .character-values>*,html body #quest-journal-dialog .menu-body>*:not(.primary):not(p),html body #bestiary-dialog .menu-body article,html body #world-map-dialog .world-map-legend{background:var(--w-card)!important;border:1px solid var(--w-line)!important;border-radius:12px!important;box-shadow:0 1px 0 #efe0bb} html body #help-dialog table,html body #help-dialog .touch-help{background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;border-collapse:separate;overflow:hidden} html body #help-dialog td,html body #help-dialog th{padding:6px 10px!important;border-bottom:1px solid #f1e3c0;font-size:12.5px} html body #sound-dialog{width:min(440px,calc(100vw - 16px))!important} html body #sound-dialog .menu-body label{font-size:12.5px} html body dialog.menu-window input[type=range]{accent-color:#c8952f} html body dialog.menu-window select{border-radius:10px!important;border:1px solid #d9bd83!important;background:#fffaf0!important;color:#4d3a22!important;min-height:34px;padding:4px 10px} /* ---------- tablet & phone ---------- */ @media (max-width:760px){ html body #bag-dialog .bag-layout{grid-template-columns:1fr!important} html body #bag-dialog .bag-scroll{max-height:none!important} html body dialog.menu-window>.menu-body{padding:10px!important} html body dialog.menu-window .menu-title h2{font-size:16px!important} } @media (max-height:520px) and (orientation:landscape){ html body dialog.menu-window{max-height:calc(var(--view-height,100dvh) - 8px)!important;border-radius:14px!important} html body dialog.menu-window>.menu-header{padding:6px 10px!important} html body dialog.menu-window .menu-emblem{width:28px!important;height:28px!important} html body dialog.menu-window .menu-title .eyebrow{display:none} html body dialog.menu-window .menu-title h2{font-size:15px!important} html body dialog.menu-window .menu-close{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important} html body #bag-dialog .bag-layout{grid-template-columns:minmax(250px,300px) 1fr!important} html body #bag-dialog .bag-scroll{max-height:calc(var(--view-height,100dvh) - 170px)!important} html body #bag-dialog .inventory-grid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))!important} html body #bag-dialog .equipment-pane>h3,html body #bag-dialog .equipment-pane>.muted,html body #bag-dialog .bag-hint{display:none} } html.touch-device #bag-dialog .bag-hint{display:none} html body #bag-dialog.menu-window.workshop-window .equipment-board{grid-template-columns:78px minmax(120px,1fr) 78px;grid-template-rows:repeat(3,82px) 74px;height:auto!important;min-height:0!important;padding:4px!important;gap:7px!important} html body #bag-dialog .gear-slot{gap:1px!important;justify-content:center} html body #bag-dialog .gear-slot>span{font-size:9.5px!important;line-height:11px!important;white-space:nowrap} html body #bag-dialog .gear-slot>div{width:36px!important;height:36px!important;margin:1px auto!important} html body #bag-dialog .gear-slot>div img{width:30px!important;height:30px!important} html body #bag-dialog .gear-slot>button{min-height:18px!important;height:18px;line-height:14px;padding:1px 10px!important} @media (max-height:520px) and (orientation:landscape){html body #bag-dialog.menu-window.workshop-window .equipment-board{grid-template-columns:60px minmax(90px,1fr) 60px;grid-template-rows:repeat(3,54px) 50px;gap:4px!important}html body #bag-dialog .gear-slot>span{font-size:8.5px!important}html body #bag-dialog .bag-summary{margin-bottom:6px;padding:3px 10px}html body #bag-dialog .gear-slot>button{display:none}html body #bag-dialog .gear-slot>div{width:30px!important;height:30px!important}html body #bag-dialog .gear-slot>div img{width:25px!important;height:25px!important}} /* 0.1.173 item details: see-through dark card (classic MMO style), always fully on screen */ html body dialog.menu-window:is(#bag-dialog,#npc-dialog){overflow:visible!important} html body dialog.menu-window:is(#bag-dialog,#npc-dialog)>.menu-header{border-radius:18px 18px 0 0} html body dialog.menu-window:is(#bag-dialog,#npc-dialog)>.menu-body{border-radius:0 0 18px 18px} html body dialog.menu-window .bag-item-tooltip{position:absolute;z-index:60;max-width:300px;overflow:auto;white-space:pre-line;text-align:center;background:rgba(18,22,26,.72)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid rgba(255,227,163,.45)!important;border-radius:10px!important;box-shadow:0 8px 22px rgba(0,0,0,.45)!important;color:#e9eef2!important;font-size:12px!important;line-height:1.55;padding:9px 13px!important;pointer-events:none} html body dialog.menu-window .bag-item-tooltip::first-line{color:#ffb03e!important;font-weight:800!important;font-size:14px!important;text-shadow:0 0 6px #ff9f2a88,0 1px 1px #000d!important} /* 0.1.173 touch controls: stick a little further in, clear attack/target icons, 5-slot skill ring */ html.touch-device{--stick-left:calc(max(12px,min(env(safe-area-inset-left,0px),24px)) + 26px)} html.touch-device #hud #touch-stick{left:var(--stick-left)} html.touch-device #touch-actions #touch-attack{right:var(--edge-right)!important;bottom:calc(var(--edge-bottom) + 64px)!important;width:64px!important;height:64px!important;padding:0!important;display:grid!important;place-items:center;background:radial-gradient(circle at 38% 25%,#fff3be,#e4b65e 55%,#9c682e)!important;border:2px solid #ffedb6!important;box-shadow:0 4px 0 #6d4515,0 6px 14px #0007!important} html.touch-device #touch-actions #touch-attack svg{width:44px!important;height:44px!important;filter:drop-shadow(0 1px 1px #0006)} html.touch-device #touch-actions #touch-target{right:calc(var(--edge-right) + 56px)!important;bottom:calc(var(--edge-bottom) + 120px)!important;width:42px!important;height:42px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;background:radial-gradient(circle at 40% 30%,#4a5a55,#15221f)!important;border:2px solid #ff9a86aa!important;box-shadow:0 3px 8px #0007!important} html.touch-device #touch-actions #touch-target svg{width:30px!important;height:30px!important} html.touch-device #touch-actions :is(#touch-attack,#touch-target) small{display:none!important} #touch-skills,#touch-skill-picker{display:none} html.touch-device #touch-skills{display:block;position:absolute;inset:0;pointer-events:none} html.touch-device #touch-skills .touch-skill{position:absolute;pointer-events:auto;width:44px;height:44px;min-width:0;min-height:0!important;padding:0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#3f5a52e6,#132520e6);border:1.5px solid #ffe3a388;box-shadow:0 3px 8px #0007;color:#ffe2a1;overflow:hidden;-webkit-touch-callout:none;user-select:none;touch-action:none} html.touch-device #touch-skills .touch-skill>span{font-size:21px;line-height:1;color:#ffe2a1;text-shadow:0 2px 0 #5b3f18} html.touch-device #touch-skills .touch-skill img{width:32px;height:32px;object-fit:contain;pointer-events:none} html.touch-device #touch-skills .touch-skill small,html.touch-device #touch-skills .touch-skill kbd{display:none} html.touch-device #touch-skills .touch-skill em{position:absolute;inset:0;border-radius:50%;font-size:14px} html.touch-device #touch-skills .touch-skill.hotbar-empty{background:#14231f66;border-style:dashed} html.touch-device #touch-skills .touch-skill.hotbar-empty>span{opacity:.55;font-size:18px} html.touch-device #touch-skills .touch-skill.action-unavailable{filter:grayscale(.6) brightness(.8)} /* arc around the attack button: centre = (edge-right + 32px, edge-bottom + 96px), radius 104px, 0..100 degrees */ html.touch-device #touch-skills [data-ring-index="0"]{right:calc(var(--edge-right) + 10px);bottom:calc(var(--edge-bottom) + 190px)} html.touch-device #touch-skills [data-ring-index="1"]{right:calc(var(--edge-right) + 54px);bottom:calc(var(--edge-bottom) + 181px)} html.touch-device #touch-skills [data-ring-index="2"]{right:calc(var(--edge-right) + 92px);bottom:calc(var(--edge-bottom) + 156px)} html.touch-device #touch-skills [data-ring-index="3"]{right:calc(var(--edge-right) + 117px);bottom:calc(var(--edge-bottom) + 118px)} html.touch-device #touch-skills [data-ring-index="4"]{right:calc(var(--edge-right) + 126px);bottom:calc(var(--edge-bottom) + 74px)} html.touch-device #touch-skills [data-ring-index="5"]{right:calc(var(--edge-right) + 12px);bottom:calc(var(--edge-bottom) + 140px)} html.touch-device #touch-skills [data-ring-index="6"]{right:calc(var(--edge-right) + 73px);bottom:calc(var(--edge-bottom) + 60px)} html.touch-device #touch-skill-picker:not([hidden]){display:flex;flex-wrap:wrap;gap:6px;position:absolute;right:calc(var(--edge-right) + 170px);bottom:calc(var(--edge-bottom) + 70px);max-width:min(300px,60vw);padding:10px;border-radius:14px;background:rgba(18,22,26,.86);border:1px solid #ffe3a366;box-shadow:0 8px 22px #0008;pointer-events:auto;z-index:20} #touch-skill-picker strong{flex-basis:100%;color:#ffd66e;font-size:13px} #touch-skill-picker button{min-height:34px!important;padding:4px 10px;border-radius:999px;background:#fff8e6;border:1px solid #e3c98c;color:#6b4e23;font-size:12px} #touch-skill-picker button[aria-pressed=true]{background:#2f8f70;color:#fff;border-color:#2f8f70} #touch-skill-picker .picker-close{background:#fbe3dc;color:#9b4a36;border-color:#e8b3a4} html.touch-device #touch-skills .touch-skill[data-action=sprint]>.sprint-icon{display:block;width:30px;height:30px;background:url(/assets/skills/sprint.svg?v=0.1.127) center/contain no-repeat;font-size:0} html.touch-device #touch-skill-picker:not([hidden]){right:calc(var(--edge-right) + 180px);bottom:calc(var(--edge-bottom) + 110px)} html.touch-device #hud #hotbar-settings{right:auto!important;left:0!important} /* 0.1.175 character window: compact, the character first, stats grouped */ html body #character-dialog.menu-window.workshop-window{width:min(760px,96vw)} html body #character-dialog.menu-window.workshop-window .menu-body{padding:10px 14px 14px} html body #character-dialog .cs-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px} html body #character-dialog.menu-window.workshop-window #character-level{margin:0;padding:4px 12px;font-size:12px;font-weight:700;border-radius:999px;color:#8a5a1c;background:#fff0c7;border:1px solid #e2bd7d} html body #character-dialog.menu-window.workshop-window .cs-top .character-tabs{margin:0;padding:0;border:0;display:flex;gap:6px} html body #character-dialog .cs-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:stretch} html body #character-dialog .cs-layout>*{min-width:0} html body #character-dialog .cs-hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 10px 10px;border-radius:16px;border:1px solid #e0c48d;background:radial-gradient(ellipse at 50% 38%,#e3f1e2 0,#f6f3df 55%,#fbecc9 100%);box-shadow:inset 0 1px #fff,0 4px 12px #b48a4a22;text-align:center} html body #character-dialog.menu-window.workshop-window #character-preview-slot{width:100%;height:300px;min-height:0} html body #character-dialog.menu-window.workshop-window #shared-character-preview{height:300px;padding:0;background:transparent;border:0} html body #character-dialog.menu-window.workshop-window #character-preview{height:274px} html body #character-dialog .cs-power{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:6px 0 4px;padding:6px 10px;border-radius:12px;background:linear-gradient(#fff3c6,#ffd77e);border:1px solid #d5a552;box-shadow:inset 0 2px #fffbe8,0 2px 0 #b98a3d55} html body #character-dialog .cs-power span{font-size:11px;color:#8b6433;font-weight:600;text-align:left;line-height:1.25} html body #character-dialog.menu-window.workshop-window .cs-power #character-attack{display:inline;padding:0;margin:0;border:0;background:none;box-shadow:none;font:800 30px/1 Georgia,"Leelawadee UI",serif;color:#5b3a12;text-shadow:0 1px #fff6d6} html body #character-dialog.menu-window.workshop-window .cs-hero #character-weapon{margin:2px 0 0;font-size:13px;font-weight:700;color:#6f4a1f} html body #character-dialog.menu-window.workshop-window .cs-hero #character-bonus{margin:2px 0 0;font-size:10px;line-height:1.45;color:#9a7b52} html body #character-dialog .cs-main{display:flex;flex-direction:column;gap:10px} html body #character-dialog .cs-bars{display:grid;gap:7px;padding:10px 12px;border-radius:14px;background:#fffdf4;border:1px solid #ead3a4} html body #character-dialog .cs-bar{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px} html body #character-dialog .cs-bar span{font-size:11px;font-weight:800;color:#8a6a3f;letter-spacing:.04em} html body #character-dialog .cs-bar i{position:relative;display:block;height:9px;border-radius:9px;background:#efe3c6;box-shadow:inset 0 1px 2px #a9884f55;overflow:hidden} html body #character-dialog .cs-bar b{position:absolute;inset:0 auto 0 0;width:0;border-radius:9px;transition:width .3s} html body #character-dialog .cs-hp b{background:linear-gradient(#7fd49b,#2f9a5c)} html body #character-dialog .cs-mp b{background:linear-gradient(#8ecbff,#3a7fd0)} html body #character-dialog .cs-xp b{background:linear-gradient(#ffe08a,#d9a032)} html body #character-dialog.menu-window.workshop-window .cs-bar em,html body #character-dialog.menu-window.workshop-window .cs-bar #character-xp{font:600 12px/1.2 "Leelawadee UI",Tahoma,sans-serif;font-style:normal;color:#54391e;white-space:nowrap;text-align:right;min-width:92px} html body #character-dialog .cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0} html body #character-dialog .cs-stats>div{padding:8px 10px;border-radius:12px;background:linear-gradient(#fffef8,#fff6e2);border:1px solid #ead3a4;min-width:0} html body #character-dialog .cs-stats dt{margin:0;font-size:10.5px;color:#9a7a4c} html body #character-dialog .cs-stats dd{margin:2px 0 0;font-size:15px;font-weight:700;color:#4f3519;overflow-wrap:anywhere;line-height:1.3} html body #character-dialog .cs-heading{margin:2px 0 -4px;font-size:12px;color:#8a5a1c;font-weight:700} html body #character-dialog .cs-gear{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin:0;padding:6px 12px;border-radius:14px;background:#fffdf4;border:1px solid #ead3a4} html body #character-dialog .cs-gear>div{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px dashed #ead7ae;min-width:0} html body #character-dialog .cs-gear>div:nth-last-child(-n+1){border-bottom:0} html body #character-dialog .cs-gear dt{flex:0 0 auto;font-size:11px;color:#9a7a4c;min-width:48px} html body #character-dialog .cs-gear dd{margin:0;font-size:12.5px;font-weight:600;color:#4f3519;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html body #character-dialog.menu-window.workshop-window .cs-main #bestiary-open{align-self:flex-end;margin:0;padding:6px 14px;min-height:30px;font-size:12px} @media(max-width:600px){html body #character-dialog .cs-layout{grid-template-columns:1fr}html body #character-dialog.menu-window.workshop-window #character-preview-slot,html body #character-dialog.menu-window.workshop-window #shared-character-preview{height:220px}html body #character-dialog.menu-window.workshop-window #character-preview{height:196px}html body #character-dialog .cs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}html body #character-dialog .cs-gear{grid-template-columns:1fr}} @media(max-height:560px) and (min-width:601px){html body #character-dialog .cs-layout{grid-template-columns:200px minmax(0,1fr);gap:10px}html body #character-dialog.menu-window.workshop-window #character-preview-slot,html body #character-dialog.menu-window.workshop-window #shared-character-preview{height:200px}html body #character-dialog.menu-window.workshop-window #character-preview{height:178px}html body #character-dialog .cs-main{gap:7px}html body #character-dialog .cs-stats>div{padding:5px 8px}html body #character-dialog .cs-stats dd{font-size:13px}html body #character-dialog .cs-gear>div{padding:3px 0}html body #character-dialog.menu-window.workshop-window .cs-power #character-attack{font-size:24px}} /* 0.1.176: the side menu always fits the window height; icons shrink on short screens */ html:not(.touch-device) body{--mi:clamp(28px,calc((100dvh - 430px) / 9),50px)} html:not(.touch-device) body .side-menu :is(.utility,.sound-open,.fullscreen,.logout){width:var(--mi)!important;height:var(--mi)!important;min-height:var(--mi)!important;min-width:var(--mi)!important} html:not(.touch-device) body .side-menu :is(#map-open,#quest-menu,#character-open,#bag-open,#help-open,#skills-open,#journal-open,#item-shop-open,#guild-open,#mail-open,#sound-open,#fullscreen,#logout)::before{width:var(--mi)!important;height:var(--mi)!important} html:not(.touch-device) body .side-adventure,html:not(.touch-device) body #hud .side-system{gap:clamp(3px,calc((100dvh - 600px) / 40),8px)!important} html:not(.touch-device) body #hud .side-menu{overflow:visible} /* 0.1.176 character window: no rotate buttons (drag to turn), compact right column */ html body #character-dialog #character-preview-slot .preview-controls{display:none!important} html body #character-dialog.menu-window.workshop-window #character-preview-slot,html body #character-dialog.menu-window.workshop-window #shared-character-preview{height:280px} html body #character-dialog.menu-window.workshop-window #character-preview{height:280px} html body #character-dialog .cs-main{gap:7px} html body #character-dialog .cs-bars{gap:5px;padding:7px 10px} html body #character-dialog .cs-bar{grid-template-columns:30px minmax(0,1fr) auto;gap:7px} html body #character-dialog .cs-bar span{font-size:10px} html body #character-dialog .cs-bar i{height:7px} html body #character-dialog.menu-window.workshop-window .cs-bar em,html body #character-dialog.menu-window.workshop-window .cs-bar #character-xp{font-size:11px;font-weight:600;min-width:84px} html body #character-dialog .cs-stats{gap:5px} html body #character-dialog .cs-stats>div{padding:5px 9px;border-radius:10px} html body #character-dialog .cs-stats dt{font-size:10px} html body #character-dialog .cs-stats dd{font-size:12.5px;font-weight:600;margin-top:1px} html body #character-dialog .cs-heading{font-size:11px;margin:1px 0 -3px} html body #character-dialog .cs-gear{padding:3px 10px;gap:0 12px;border-radius:12px} html body #character-dialog .cs-gear>div{padding:4px 0} html body #character-dialog .cs-gear dt{font-size:10px;min-width:62px} html body #character-dialog .cs-gear dd{font-size:11.5px;font-weight:600} html body #character-dialog .cs-gear>div:nth-last-child(-n+2){border-bottom:0} html body #character-dialog.menu-window.workshop-window .cs-main #bestiary-open{padding:5px 12px;min-height:26px;font-size:11px} @media(max-height:560px) and (min-width:601px){html body #character-dialog.menu-window.workshop-window #character-preview-slot,html body #character-dialog.menu-window.workshop-window #shared-character-preview,html body #character-dialog.menu-window.workshop-window #character-preview{height:190px}} @media(max-width:600px){html body #character-dialog.menu-window.workshop-window #character-preview-slot,html body #character-dialog.menu-window.workshop-window #shared-character-preview,html body #character-dialog.menu-window.workshop-window #character-preview{height:210px}} html body #character-dialog.menu-window.workshop-window{width:min(740px,calc(100vw - 16px))!important} html body #character-dialog .cs-gear dt{min-width:0;flex:0 0 58px} html body #character-dialog .cs-gear dt{flex:0 0 46px;white-space:nowrap} .side-menu #skills-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/skills-open.svg?v=0.1.177) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} #hud .side-menu #side-menu-items #skills-open::after{content:"สกิลและท่าทาง [K]"} html:not(.touch-device) body{--mi:clamp(28px,calc((100dvh - 440px) / 10),50px)} /* 0.1.177 skills & actions window */ html body #skills-dialog.menu-window{position:fixed;inset:auto;left:calc(50% - 230px);top:12vh;margin:0;width:min(460px,calc(100vw - 16px));max-height:min(620px,calc(100dvh - 24px));padding:0;overflow:hidden;display:none;flex-direction:column;z-index:30} html body #skills-dialog.menu-window[open]{display:flex} #skills-dialog .menu-body{padding:10px 12px 12px;overflow:auto;min-height:0} #skills-dialog .skills-tabs{display:flex;gap:6px;margin:0 0 10px} #skills-dialog .skills-tabs button{flex:1;min-height:30px;padding:4px 10px;border-radius:999px;border:1px solid #e0c48d;background:#fff8e6;color:#7a5424;font-size:12px;font-weight:700} #skills-dialog .skills-tabs button[aria-pressed=true]{background:linear-gradient(#3aa487,#1f7a63);color:#fff;border-color:#1f6f5a;box-shadow:0 2px 0 #145847} #skills-dialog .action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} #skills-dialog .action-card{position:relative;display:flex;align-items:center;gap:8px;padding:7px 30px 7px 7px;border-radius:12px;border:1px solid #ead3a4;background:linear-gradient(#fffef8,#fff4dc);cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;min-width:0} #skills-dialog .action-card:hover{border-color:#d4a24f;box-shadow:0 2px 8px #b88a4a33} #skills-dialog .action-art{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:10px;background:radial-gradient(circle at 40% 30%,#3f5a52,#132520);color:#ffe2a1;font-size:19px;overflow:hidden} #skills-dialog .action-art img{width:32px;height:32px;object-fit:contain;pointer-events:none} #skills-dialog .action-text{display:flex;flex-direction:column;min-width:0} #skills-dialog .action-text b{font-size:12.5px;color:#4f3519;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #skills-dialog .action-text small{font-size:10.5px;color:#9a7a4c;line-height:1.3} #skills-dialog .action-add{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:22px;height:22px;min-height:0;padding:0;border-radius:50%;border:1px solid #d9b877;background:#fff6dc;color:#8a5a1c;font-size:14px;line-height:1} #skills-dialog h3{margin:4px 0 6px;font-size:12.5px;color:#8a5a1c}#skills-dialog h3 small{font-weight:400;color:#9a7a4c} #skills-dialog .social-list{display:flex;flex-direction:column;gap:5px;margin-bottom:8px} #skills-dialog .social-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:10px;border:1px solid #ead3a4;background:#fffdf4} #skills-dialog .social-who{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap} #skills-dialog .social-who b{font-size:12.5px;color:#4f3519}#skills-dialog .social-who small{font-size:10.5px;color:#9a7a4c} #skills-dialog .social-dot{width:8px;height:8px;border-radius:50%;background:#bfb3a0;align-self:center}#skills-dialog .social-dot[data-online=true]{background:#39b06f;box-shadow:0 0 5px #39b06f}#skills-dialog .social-dot:not([data-online]){display:none} #skills-dialog .social-actions{display:flex;gap:4px;flex:none} #skills-dialog .social-actions button{width:28px;height:28px;min-height:0;padding:0;border-radius:8px;border:1px solid #d9b877;background:#fff6dc;color:#7a5424;font-size:14px} #skills-dialog .social-empty{margin:2px 0;font-size:11.5px;color:#9a7a4c} #skills-dialog .skills-hint{margin:10px 0 0;font-size:10.5px;color:#9a7a4c;text-align:center} @media(max-width:520px){#skills-dialog .action-grid{grid-template-columns:1fr}} /* requests */ #social-requests{position:fixed;left:50%;top:84px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:60;pointer-events:none} #social-requests .social-request{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(18,22,26,.86);border:1px solid #ffe3a366;box-shadow:0 8px 20px #0007;color:#fff4d2;font-size:12.5px} #social-requests .social-request p{margin:0 4px 0 0} #social-requests .social-request button{min-height:28px;padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid #e3c98c;background:#fff8e6;color:#6b4e23} #social-requests .social-request button.primary{background:linear-gradient(#ffe29a,#e9b04f);color:#5a3a12} /* trade window */ html body #trade-dialog.menu-window{position:fixed;inset:auto;left:calc(50% - 280px);top:10vh;margin:0;width:min(560px,calc(100vw - 16px));max-height:calc(100dvh - 20px);padding:0;overflow:hidden;display:none;flex-direction:column;z-index:35} html body #trade-dialog.menu-window[open]{display:flex} #trade-dialog .menu-body{padding:10px 12px 12px;overflow:auto;min-height:0} #trade-dialog .trade-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px} #trade-dialog .trade-side{padding:8px;border-radius:12px;border:1px solid #ead3a4;background:#fffdf4;min-width:0} #trade-dialog.both-locked .trade-side{border-color:#39b06f;box-shadow:inset 0 0 0 1px #39b06f55} #trade-dialog .trade-side h3{margin:0 0 6px;font-size:12.5px;color:#8a5a1c;display:flex;justify-content:space-between;gap:6px} #trade-dialog .trade-side h3 em{font-style:normal;font-weight:600;font-size:11px;color:#2d8a5e} #trade-dialog .trade-items{display:flex;flex-direction:column;gap:4px;min-height:96px} #trade-dialog .trade-item{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:8px;background:#fff6e2;border:1px solid #efdcb4;font-size:12px;color:#4f3519;min-width:0} #trade-dialog .trade-item img,#trade-dialog .trade-item>span:first-child{width:26px;height:26px;object-fit:contain;flex:none} #trade-dialog .trade-item span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #trade-dialog .trade-item b{flex:none;color:#7a4f14} #trade-dialog .trade-item button{flex:none;width:22px;height:22px;min-height:0;padding:0;border-radius:50%;border:1px solid #e0c48d;background:#fff;color:#a0521c} #trade-dialog .trade-empty{margin:6px 0;font-size:11px;color:#a58a5f;text-align:center} #trade-dialog .trade-gold{margin:6px 0 4px;font-size:12px;color:#7a5424}#trade-dialog .trade-gold input{width:110px;margin-left:6px} #trade-dialog .trade-pick{display:flex;gap:4px}#trade-dialog .trade-pick select{flex:1;min-width:0;font-size:12px}#trade-dialog .trade-pick input{width:56px}#trade-dialog .trade-pick button{padding:3px 10px;min-height:28px;font-size:12px} #trade-dialog .trade-their-gold{margin:6px 0 0;font-size:12.5px;font-weight:700;color:#7a4f14} #trade-dialog .trade-status{margin:8px 0 6px;font-size:12px;color:#2d6f58;text-align:center;font-weight:600} #trade-dialog .trade-confirm{margin:6px 0;padding:8px 10px;border-radius:12px;border:1px solid #e4b75b;background:#fff3cf;text-align:center} #trade-dialog .trade-confirm p{white-space:pre-line;margin:0 0 8px;font-size:12.5px;color:#4f3519} #trade-dialog .trade-confirm button{margin:0 4px;min-height:30px;padding:4px 14px;font-size:12px} #trade-dialog .trade-actions{display:flex;justify-content:center;gap:8px} #trade-dialog .trade-actions button{min-height:32px;padding:5px 16px;font-size:12.5px;border-radius:999px} #trade-dialog .trade-actions button:disabled{opacity:.5} #trade-dialog .trade-note{margin:8px 0 0;font-size:10.5px;color:#9a7a4c;text-align:center} @media(max-width:560px){#trade-dialog .trade-columns{grid-template-columns:1fr}} #trade-dialog .trade-actions button{white-space:nowrap;min-width:92px} #trade-dialog .trade-gold{display:flex;align-items:center;gap:6px}#trade-dialog .trade-gold label{display:flex;align-items:center;gap:6px;margin:0}#trade-dialog .trade-gold input{width:120px!important;min-height:30px;padding:3px 8px} #trade-dialog .trade-pick input{min-height:30px;padding:3px 6px}#trade-dialog .trade-pick select{min-height:30px} #trade-dialog .trade-side h3 span{margin-right:4px} /* 0.1.178: the sprint icon also shows when sprint sits in any hotbar slot */ #hud .actionbar .hotbar-slot[data-action=sprint]>.sprint-icon{display:block;width:32px;height:32px;margin:5px auto 0;background:url(/assets/skills/sprint.svg?v=0.1.127) center/contain no-repeat;filter:drop-shadow(0 2px 1px #0007)} #trade-dialog .trade-space{margin:8px 0 0;font-size:11px;color:#7a6440;text-align:center} #trade-dialog .trade-problem{margin:6px 0 0;padding:6px 10px;border-radius:10px;background:#fde6d8;border:1px solid #e6a07a;color:#8a3a14;font-size:12px;font-weight:600;text-align:center} #trade-dialog .trade-item{cursor:help} #skills-dialog .action-card{padding-right:7px} /* 0.1.179 trade: drag from the bag, quantity popup, quiet number fields */ html body #trade-dialog.menu-window{left:12px;top:9vh;width:min(500px,calc(100vw - 16px))} #trade-dialog .trade-side.mine .trade-items{min-height:120px;border:1.5px dashed #d9bd83;border-radius:10px;padding:5px;background:#fffaf0;transition:background .12s,border-color .12s} #trade-dialog .trade-side.mine.trade-drop-target .trade-items{background:#e6f6ec;border-color:#39b06f} #trade-dialog .trade-side.mine.locked .trade-items{border-style:solid;border-color:#ead3a4;background:#fffdf4} #trade-dialog .trade-drop-hint{margin:6px 0 0;font-size:11px;color:#a0845a;text-align:center} #trade-dialog .trade-qty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:min(300px,90%);padding:12px 14px;border-radius:14px;background:#fffdf5;border:1px solid #d9b877;box-shadow:0 10px 26px #3a2a1255;text-align:center} #trade-dialog .trade-qty p{margin:0 0 8px;font-size:13px;font-weight:700;color:#5b3d17} #trade-dialog .trade-qty-row{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:6px} #trade-dialog .trade-qty-row button{min-height:30px;min-width:34px;padding:3px 10px;border-radius:999px;font-size:12.5px} #trade-dialog .trade-qty-row input{width:74px;text-align:center} #trade-dialog .trade-alert{margin:6px 0 0;padding:6px 10px;border-radius:10px;background:#fbe0d6;border:1px solid #e08a6a;color:#8a2a0c;font-size:12px;font-weight:700;text-align:center} #trade-dialog .menu-body{position:relative} html body dialog.menu-window input[type=number]:is(:focus,:focus-visible,:hover),html body #trade-dialog input[type=number]{outline:none!important;box-shadow:none!important} html body #trade-dialog input[type=number]{border:1px solid #e0c48d!important;border-radius:8px;background:#fffdf6;-moz-appearance:textfield;appearance:textfield} html body #trade-dialog input[type=number]::-webkit-inner-spin-button,html body #trade-dialog input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} html body #trade-dialog input[type=number]:focus{border-color:#e0c48d!important} @media(max-width:1420px){html body #trade-dialog.menu-window{width:min(356px,calc(100vw - 16px))}#trade-dialog .trade-columns{grid-template-columns:1fr}#trade-dialog .trade-side.mine .trade-items{min-height:84px}#trade-dialog .trade-items{min-height:40px}} html body #trade-dialog.menu-window[open]{z-index:45} /* 0.1.180 Wide Realms: bestiary emblems for the new creature kinds */ html body .bestiary-emblem.beast{background:#efc3ac;color:#a4452f}html body .bestiary-emblem.wisp{background:#dcd3f2;color:#6f58b8} /* 0.1.187 phone/tablet HUD: one tidy row for the hotbar (1-9 and V), an evenly spaced double arc of quick slots around the attack button, and a wrapped menu panel that never covers the minimap. */ html.touch-device #hud #touch-actions #touch-target{right:calc(var(--edge-right) + 18px)!important;bottom:calc(var(--edge-bottom) + 161px)!important;width:42px!important;height:42px!important} html.touch-device #hud #touch-skills [data-ring-index="0"]{right:calc(var(--edge-right) + 63px)!important;bottom:calc(var(--edge-bottom) + 144px)!important;width:42px!important;height:42px!important} html.touch-device #hud #touch-skills [data-ring-index="1"]{right:calc(var(--edge-right) + 91px)!important;bottom:calc(var(--edge-bottom) + 106px)!important;width:42px!important;height:42px!important} html.touch-device #hud #touch-skills [data-ring-index="2"]{right:calc(var(--edge-right) + 95px)!important;bottom:calc(var(--edge-bottom) + 59px)!important;width:42px!important;height:42px!important} html.touch-device #hud #touch-skills [data-ring-index="3"]{right:calc(var(--edge-right) + 35px)!important;bottom:calc(var(--edge-bottom) + 213px)!important;width:42px!important;height:42px!important} html.touch-device #hud #touch-skills [data-ring-index="4"]{right:calc(var(--edge-right) + 87px)!important;bottom:calc(var(--edge-bottom) + 192px)!important;width:42px!important;height:42px!important} html.touch-device #hud #touch-skills [data-ring-index="5"]{right:calc(var(--edge-right) + 127px)!important;bottom:calc(var(--edge-bottom) + 153px)!important;width:42px!important;height:42px!important} html.touch-device #hud #touch-skills [data-ring-index="6"]{right:calc(var(--edge-right) + 148px)!important;bottom:calc(var(--edge-bottom) + 102px)!important;width:42px!important;height:42px!important} html.touch-device #hud #touch-actions #touch-attack{right:var(--edge-right)!important;bottom:calc(var(--edge-bottom) + 64px)!important;width:64px!important;height:64px!important} html.touch-device #hud .bottom{left:calc(var(--edge-left) + 244px)!important;right:calc(var(--edge-right) + 200px)!important;bottom:calc(var(--edge-bottom) + 4px)!important;width:auto!important;max-width:none!important;transform:none!important;padding:0!important} html.touch-device #hud .bottom .actionbar{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;gap:4px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important} html.touch-device #hud .bottom .actionbar .hotbar-slot,html.touch-device #hud .bottom .actionbar #meditate{flex:1 1 0!important;width:auto!important;min-width:26px!important;max-width:42px!important;height:42px!important;aspect-ratio:auto} html.touch-device #hud .bottom .actionbar .hotbar-slot img{max-width:80%;max-height:80%} html.touch-device #hud #hotbar-settings{position:absolute!important;left:0!important;right:auto!important;bottom:48px!important;top:auto!important;margin:0!important} html.touch-device #hud #side-menu-items:not([hidden]){position:fixed!important;top:calc(var(--edge-top) + 40px)!important;right:calc(var(--edge-right) + 104px)!important;left:auto!important;bottom:auto!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;align-content:flex-start;gap:8px!important;width:auto!important;max-width:min(420px,calc(100vw - var(--edge-left) - var(--edge-right) - 330px))!important;max-height:none!important;height:auto!important;padding:8px!important;border-radius:16px!important;background:linear-gradient(160deg,#1d4640e6,#0f2b2ae6)!important;border:1px solid #e3c88a77!important;box-shadow:0 6px 18px #00141a66!important;transform:none!important;overflow:visible!important;z-index:30} html.touch-device #hud #side-menu-items>div{display:contents!important} html.touch-device #hud #side-menu-items button{flex:none!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:3px!important;margin:0!important;border-radius:12px!important} html.touch-device #hud #side-menu-items button img{width:34px!important;height:34px!important;object-fit:contain} html.touch-device #hud #side-menu-items button small{display:none!important} html.touch-device #hud #side-menu-items hr,html.touch-device #hud #side-menu-items .divider{display:none!important} html.touch-device #hud #menu-toggle{position:relative!important;z-index:45!important;display:grid!important;place-items:center;width:36px!important;height:32px!important;min-height:32px!important;border-radius:10px!important;border:1px solid #e7cf93!important;background:radial-gradient(circle at 35% 25%,#fff6d5,#e9c472 60%,#b8843f)!important;color:#6b4518!important;font-size:22px!important;line-height:1!important;opacity:1!important;box-shadow:0 2px #7d5a2c,0 3px 6px #00141a55!important} html.touch-device #hud #side-menu-items:not([hidden]){max-width:min(500px,calc(100vw - var(--edge-left) - var(--edge-right) - 300px))!important} #hotbar-extra-picker:not([hidden]){position:fixed;z-index:60;display:flex;flex-wrap:wrap;gap:6px;max-width:min(320px,80vw);padding:10px;border-radius:14px;background:rgba(18,22,26,.9);border:1px solid #ffe3a388;box-shadow:0 6px 18px #0007} #hotbar-extra-picker strong{flex-basis:100%;color:#ffd66e;font-size:13px} #hotbar-extra-picker button{min-height:32px;padding:4px 10px;border-radius:999px;background:#fff8e6;border:1px solid #e3c98c;color:#6b4e23;font-size:12px;cursor:pointer} #hotbar-extra-picker button[aria-pressed=true]{background:#2f8f70;color:#fff;border-color:#2f8f70} #hotbar-extra-picker .picker-close{background:#fbe3dc;color:#9b4a36;border-color:#e8b3a4} /* 0.1.188 */ .actionbar .hotbar-v-hidden,.actionbar .hotbar-slot[hidden]{display:none!important} .item-drag-ghost .action-art{display:grid;place-items:center;width:100%;height:100%;font-size:24px} .item-drag-ghost .action-art img{width:100%;height:100%;object-fit:contain} /* 0.1.188 phone: the attack cluster sits lower, beside the 1-9 row */ html.touch-device #hud #touch-actions #touch-target{right:calc(var(--edge-right) + 14px)!important;bottom:calc(var(--edge-bottom) + 127px)!important} html.touch-device #hud #touch-skills [data-ring-index="0"]{right:calc(var(--edge-right) + 59px)!important;bottom:calc(var(--edge-bottom) + 112px)!important} html.touch-device #hud #touch-skills [data-ring-index="1"]{right:calc(var(--edge-right) + 90px)!important;bottom:calc(var(--edge-bottom) + 76px)!important} html.touch-device #hud #touch-skills [data-ring-index="2"]{right:calc(var(--edge-right) + 96px)!important;bottom:calc(var(--edge-bottom) + 29px)!important} html.touch-device #hud #touch-skills [data-ring-index="3"]{right:calc(var(--edge-right) + 30px)!important;bottom:calc(var(--edge-bottom) + 180px)!important} html.touch-device #hud #touch-skills [data-ring-index="4"]{right:calc(var(--edge-right) + 83px)!important;bottom:calc(var(--edge-bottom) + 161px)!important} html.touch-device #hud #touch-skills [data-ring-index="5"]{right:calc(var(--edge-right) + 124px)!important;bottom:calc(var(--edge-bottom) + 123px)!important} html.touch-device #hud #touch-skills [data-ring-index="6"]{right:calc(var(--edge-right) + 147px)!important;bottom:calc(var(--edge-bottom) + 72px)!important} html.touch-device #hud #touch-actions #touch-attack{bottom:calc(var(--edge-bottom) + 30px)!important} html.touch-device #hud .bottom{right:calc(var(--edge-right) + 206px)!important} /* 0.1.190 — เหรียญอยู่ใต้หลอด HP/MP, ไม่มีปุ่มจัดช่อง */ #hud #hotbar-settings,html.touch-device #hud #hotbar-settings{display:none!important} #hud .player-info .currency,html.touch-device #hud .player-info .currency{position:static!important;display:inline-flex!important;align-items:center;gap:6px;width:auto;min-width:0;max-width:170px;margin:4px 0 0!important;padding:2px 9px 2px 4px;border:1px solid #b4955866;border-radius:11px;background:#1d463ecc;font-size:13px;line-height:18px;backdrop-filter:none} #hud .player-info .currency small{display:inline!important;margin:0!important;font-size:10px;line-height:18px;color:#d6e9cd} #hud .player-info .currency #gold{line-height:18px} html.touch-device #hud .player-info .currency{font-size:10px;padding:0 7px 0 3px;margin-top:2px!important;line-height:15px} html.touch-device #hud .player-info .currency>span{width:13px;height:13px;font-size:8px} html.touch-device #hud .player-info .currency small{display:none!important} html.touch-device #hud .player-info .currency #gold{line-height:15px} /* 0.1.191 — ผู้ช่วยบอกเมื่อไม่มีมอนสเตอร์ให้ตี */ html body #hunt-bot-dock #hunt-bot-open[data-idle=true] span{color:#ffd9a0} html body #hunt-bot-dock{top:146px} html.touch-device body #hunt-bot-dock{top:88px} /* 0.1.194 — emblems, skill board, prana board */ .mk-icon{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px #0006)} .skill>span.skill-emblem,#hud .actionbar .skill>span.skill-emblem{display:block;width:34px;height:34px;margin:0 auto;line-height:0;font-size:0;text-shadow:none} html.touch-device #hud .actionbar .skill>span.skill-emblem{width:30px;height:30px} #touch-controls .skill-emblem,#touch-actions .skill-emblem{display:block;width:70%;height:70%;margin:auto;line-height:0;font-size:0} html body #skills-dialog.menu-window{left:calc(50% - 290px);width:min(580px,calc(100vw - 16px));max-height:min(700px,calc(100dvh - 20px))} #skills-dialog .art-title{display:flex;align-items:baseline;gap:8px;margin:8px 2px 7px;font-size:13px;color:#7a4c14;letter-spacing:.2px} #skills-dialog .art-title small{font-size:10.5px;font-weight:400;color:#a08456} #skills-dialog .art-list{display:grid;gap:8px;margin-bottom:10px} #skills-dialog .art-row{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:11px;padding:8px 11px 8px 8px;border-radius:14px;border:1px solid #dcbd82;background:linear-gradient(180deg,#fffdf5 0%,#fbeccb 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #e7cf9d,0 2px 6px #6b4a1522;cursor:default} #skills-dialog .art-row.action-card{cursor:grab;padding:8px 11px 8px 8px;display:grid} #skills-dialog .art-row.action-card:hover{border-color:#c9953f;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #e2c489,0 4px 12px #6b4a1540;transform:translateY(-1px)} #skills-dialog .art-row.action-card:active{cursor:grabbing} #skills-dialog .art-icon{width:62px;height:62px;border-radius:50%;padding:3px;background:radial-gradient(circle at 50% 35%,#2d4b44,#0f201c);box-shadow:inset 0 2px 5px #000a,0 1px 0 #fff8} #skills-dialog .art-main{display:flex;flex-direction:column;gap:2px;min-width:0} #skills-dialog .art-head{display:flex;align-items:center;gap:8px;min-width:0} #skills-dialog .art-head b{font-size:14.5px;color:#4a2f12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #skills-dialog .art-pips{display:inline-flex;gap:3px;flex:0 0 auto} #skills-dialog .art-pips i{width:8px;height:8px;border-radius:50%;background:#e3d2ac;box-shadow:inset 0 1px 1px #0003} #skills-dialog .art-pips i[data-on]{background:radial-gradient(circle at 35% 30%,#fff3b8,#e2a52c 60%,#9a6510);box-shadow:0 0 4px #f0b84a} #skills-dialog .art-info{font-size:11px;color:#8a6a3c;line-height:1.3} #skills-dialog .art-stats{font-size:11px;color:#2f6a57;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums} #skills-dialog .art-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:104px;text-align:right} #skills-dialog .art-side small{font-size:10px;color:#9a7a4c} #skills-dialog .art-state{font-style:normal;font-weight:700;font-size:12px;padding:3px 11px;border-radius:999px} #skills-dialog .art-open{background:linear-gradient(#3fa98b,#1f7a63);color:#fff;box-shadow:0 2px 0 #145847} #skills-dialog .art-level{background:#e9dcc0;color:#7c6742;box-shadow:inset 0 1px 2px #0002} #skills-dialog .art-buy{min-height:32px;padding:5px 12px;border-radius:10px;border:1px solid #a8741f;background:linear-gradient(#ffe08a,#e7a93a);color:#4a2c05;font-size:12px;font-weight:700;box-shadow:0 2px 0 #9a6a17,inset 0 1px 0 #fff8;white-space:nowrap} #skills-dialog .art-buy[data-armed]{background:linear-gradient(#ff9e7a,#e2552c);color:#fff;border-color:#9a2f12;box-shadow:0 2px 0 #8a2a10} #skills-dialog .art-buy:disabled{filter:grayscale(.8);opacity:.6} #skills-dialog .art-sealed{background:linear-gradient(180deg,#f3ecdc,#e6dcc4)} #skills-dialog .art-sealed .art-icon{filter:grayscale(1) brightness(.75)} #skills-dialog .art-sealed .art-head b,#skills-dialog .art-sealed .art-info,#skills-dialog .art-sealed .art-stats{color:#9a8f7a} #skills-dialog .art-buyable{border-color:#e0a83c;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #e7cf9d,0 0 0 2px #f3cf7a55,0 2px 6px #6b4a1522} #skills-dialog .art-buyable .art-icon{filter:saturate(.45) brightness(.9)} #character-prana-page h3{margin:4px 0 6px} #character-prana-page .prana-free{margin:0 0 8px;padding:8px 12px;border-radius:10px;background:linear-gradient(#f6e7c2,#ecd9a8);box-shadow:inset 0 1px 0 #fff8,0 1px 3px #6b4a1522;color:#5e492c} #character-prana-page .prana-free b{font-size:18px;color:#1f7a63;margin:0 3px} #prana-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #prana-rows .prana-heading{grid-column:1 / -1;margin:6px 2px 0;font-size:12.5px;color:#7a4c14} .prana-tile{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px 8px 8px;border:1px solid #dcbd82;border-radius:13px;background:linear-gradient(180deg,#fffdf5,#fbeccb);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #e7cf9d,0 2px 5px #6b4a1520} .prana-art{position:relative;width:58px;height:58px} .prana-points{position:absolute;right:-4px;bottom:-4px;min-width:26px;padding:1px 5px;border-radius:9px;background:linear-gradient(#27433d,#0f201c);border:1px solid #d2a140;color:#ffe9a8;font-style:normal;font-size:11px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px #0008} .prana-body{display:flex;flex-direction:column;gap:3px;min-width:0} .prana-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px} .prana-head b{font-size:13.5px;color:#4a2f12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .prana-head em{font-style:normal;font-size:10px;color:#a08456;white-space:nowrap} .prana-effect{font-size:10.5px;line-height:1.35;color:#7c6a48;min-height:28px} .prana-buttons{display:flex;gap:4px} .prana-buttons button{flex:1;min-height:26px;padding:2px 4px;border:1px solid #1f6f5a;border-radius:8px;background:linear-gradient(#49a98d,#237a64);color:#fff;font-size:11px;font-weight:700;box-shadow:0 2px 0 #145847} .prana-buttons button:disabled{filter:grayscale(.9);opacity:.45;box-shadow:none} .prana-sealed{background:linear-gradient(180deg,#f3ecdc,#e6dcc4)}.prana-sealed .mk-icon{filter:grayscale(1) brightness(.7)}.prana-sealed .prana-head b,.prana-sealed .prana-effect{color:#9a8f7a} #prana-reset{margin-top:10px;min-height:34px;padding:6px 14px;border:1px solid #c78f7c;border-radius:10px;background:#fbe4dc;color:#8a3d2a;font-weight:700}#prana-reset:disabled{opacity:.45} #character-prana-tab[data-points]:not([data-points=""]){box-shadow:0 0 0 2px #e8b84a inset} .character-skill-table tr.skill-locked td{opacity:.5} @media(max-width:620px){#prana-rows{grid-template-columns:minmax(0,1fr)}#skills-dialog .art-row{grid-template-columns:50px minmax(0,1fr)}#skills-dialog .art-icon{width:50px;height:50px}#skills-dialog .art-side{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;min-width:0}} html.touch-device #touch-skills .touch-skill>span.skill-emblem{display:block;width:38px;height:38px;margin:auto;line-height:0;font-size:0;text-shadow:none} /* 0.1.196 */ .floater.floater-crit{font-size:1.5em;color:#ffd24a!important;text-shadow:0 0 6px #ff7a1a,0 2px 0 #5a2a00} html.touch-device #hud #touch-skills .touch-skill .mk-icon{width:100%!important;height:100%!important} /* 0.1.199 — icons fill their slots; thinner, softer gold rim */ #hud .actionbar .skill.hotbar-slot{position:relative} #hud .actionbar .skill>span.skill-emblem,html.touch-device #hud .actionbar .skill>span.skill-emblem{position:absolute;inset:1px;width:auto;height:auto;margin:0} #hud .actionbar .skill.hotbar-slot>img{width:86%;height:86%;max-width:none;max-height:none;object-fit:contain} #hud .actionbar .skill.hotbar-slot>kbd{z-index:2;text-shadow:0 1px 2px #000,0 0 3px #000} #hud .actionbar .skill.hotbar-slot>em,#hud .actionbar .skill.hotbar-slot>.hotbar-count{z-index:2} #skills-dialog .art-icon{padding:0;background:none;box-shadow:0 2px 5px #0005} #skills-dialog .art-row{grid-template-columns:64px minmax(0,1fr) auto} #skills-dialog .art-icon{width:64px;height:64px} .prana-art{width:60px;height:60px}.prana-tile{grid-template-columns:60px minmax(0,1fr)} html.touch-device #touch-skills .touch-skill>span.skill-emblem{width:42px;height:42px} /* 0.1.200 Twilight Road: warp prompt shown while standing in a gate ring */ #warp-prompt{position:fixed;left:50%;bottom:calc(168px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;padding:11px 26px;border-radius:999px;border:1px solid #f0d9a0aa;background:linear-gradient(180deg,#4b3a78ee,#2a2148ee);color:#fff3d6;font:600 16px/1.2 "Leelawadee UI",Tahoma,sans-serif;letter-spacing:.3px;box-shadow:0 6px 22px #0008,0 0 18px #b48cff66;cursor:pointer;animation:warp-pulse 1.8s ease-in-out infinite;touch-action:manipulation} #warp-prompt[hidden]{display:none} #warp-prompt[data-locked="true"]{background:linear-gradient(180deg,#3d3d46ee,#25252cee);color:#cfc9bd;box-shadow:0 6px 22px #0008;animation:none;cursor:default} @keyframes warp-pulse{50%{box-shadow:0 6px 22px #0008,0 0 30px #d7a8ffaa}} html.touch-device #warp-prompt{bottom:calc(46vh);font-size:15px;padding:10px 22px} /* 0.1.201 Sworn Paths: townsfolk window, errand tracker, quest marks on NPC labels */ #quest-npc-dialog{width:min(560px,94vw);max-height:88dvh} .npc-quest-list{display:grid;gap:12px} .npc-quest-card{border:1px solid #d8c48f66;border-radius:12px;padding:12px 14px;background:#fffaf0;color:#3a3122} .npc-quest-card h3{margin:0 0 6px;font-size:16px;color:#6b4a1c} .npc-quest-card p{margin:0 0 8px;line-height:1.55} .npc-quest-steps{margin:0 0 8px;padding-left:22px;color:#5b5140;font-size:13.5px;line-height:1.6} .npc-quest-reward{display:block;margin-bottom:10px;color:#2f6b4f;font-weight:600} .npc-quest-card button{min-width:130px} .npc-quest-card[data-action="talk"]{border-color:#3f9a72;box-shadow:0 0 0 2px #3f9a7233} .npc-quest-status{margin-top:12px}.npc-quest-status[data-ok="false"]{color:#b0412f} #chain-tracker{position:fixed;right:76px;top:272px;width:236px;max-height:34vh;overflow:auto;padding:9px 11px;border-radius:10px;border:1px solid #c9b87a66;background:rgba(13,35,40,.78);color:#eaf5ed;font-size:12.5px;line-height:1.45;z-index:6;pointer-events:none} #chain-tracker[hidden]{display:none}#chain-tracker strong{display:block;color:#edd1a0;margin-bottom:4px;font-size:12px;letter-spacing:.3px} #chain-tracker .chain-row{margin-top:5px}#chain-tracker .chain-row b{display:block;color:#ffe2a8;font-weight:600}#chain-tracker .chain-row i{display:block;color:#d7a8ff;font-style:normal} html.touch-device #chain-tracker{right:8px;top:168px;width:190px;font-size:11.5px;max-height:22vh} .label.npc[data-mark="❗"],.label.npc[data-mark="❓"]{color:#ffe08a;font-weight:700} /* 0.1.202 Tempered Steel: the smith's window and + badges */ #forge-dialog{width:min(720px,96vw);max-height:90dvh} .forge-tabs{display:flex;gap:8px;margin-bottom:12px}.forge-tabs button{flex:1;padding:9px 6px;border-radius:10px;border:1px solid #cdb67c;background:#f6ecd2;color:#5a4320;font-weight:600} .forge-tabs button[aria-pressed="true"]{background:linear-gradient(180deg,#f3c95a,#d99e2b);color:#3a2706;border-color:#a8771a} .forge-page{display:grid;gap:12px;color:#3a3122}.forge-page[data-tab="plus"],.forge-page[data-tab="option"]{grid-template-columns:minmax(150px,230px) 1fr} @media(max-width:620px){.forge-page[data-tab="plus"],.forge-page[data-tab="option"]{grid-template-columns:1fr}} .forge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;align-content:start;max-height:46dvh;overflow:auto;padding:6px;border-radius:12px;background:#efe3c4} .forge-item{position:relative;aspect-ratio:1;padding:3px;border-radius:10px;border:2px solid transparent;background:#fffaf0}.forge-item img{width:100%;height:100%;object-fit:contain;display:block} .forge-item[aria-pressed="true"]{border-color:#d99e2b;box-shadow:0 0 0 2px #f3c95a66} .forge-plus{position:absolute;left:3px;top:2px;font:700 12px/1 Tahoma,sans-serif;color:#fff3b0;text-shadow:0 0 3px #7a2a00,0 1px 2px #000,0 0 6px #ff8a00;pointer-events:none} .forge-dots{position:absolute;left:3px;bottom:2px;font-size:8px;letter-spacing:1px;color:#b48cff;text-shadow:0 1px 1px #000;pointer-events:none} .forge-worn{position:absolute;right:2px;top:2px;font-size:9px;padding:1px 4px;border-radius:6px;background:#2f6b4f;color:#fff} .inventory-slot{position:relative} .forge-box{border:1px solid #d8c48f66;border-radius:12px;padding:12px 14px;background:#fffaf0}.forge-box h3{margin:0 0 6px;color:#6b4a1c}.forge-box p{margin:0 0 7px;line-height:1.5} .forge-next{color:#2f6b4f;font-weight:600}.forge-chance{color:#7a4a12}.forge-max{color:#a8771a;font-weight:700} .forge-checks{display:grid;gap:5px;margin:8px 0 12px}.forge-check{display:flex;gap:8px;align-items:center}.forge-check input:disabled+span{opacity:.5} .forge-slots{margin:0 0 10px;padding-left:22px;line-height:1.7}.forge-slots li{color:#5b2f9a;font-weight:600}.forge-slots li.empty{color:#a39a86;font-weight:400} .forge-stones{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin-bottom:10px} .forge-stone{display:grid;justify-items:center;gap:2px;padding:6px 4px;border-radius:10px;border:2px solid #e2d3a8;background:#fff;font-size:12px;color:#3a3122}.forge-stone img{width:42px;height:42px}.forge-stone[aria-pressed="true"]{border-color:#9a5be0;box-shadow:0 0 0 2px #9a5be044}.forge-stone:disabled{opacity:.45} .forge-actions{display:flex;gap:8px;flex-wrap:wrap}.forge-actions button:not(.primary),.forge-buy button{padding:7px 12px;border-radius:9px;border:1px solid #cdb67c;background:#f6ecd2;color:#5a4320} .forge-shop h3{margin:4px 0 6px;color:#6b4a1c}.forge-wares{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px} .forge-ware{display:grid;grid-template-columns:44px 1fr;gap:2px 8px;align-items:center;padding:8px;border-radius:10px;border:1px solid #d8c48f66;background:#fffaf0;font-size:13px}.forge-ware img{grid-row:span 3;width:44px;height:44px}.forge-ware small{color:#6d6452;line-height:1.35}.forge-price{color:#2f6b4f;font-weight:600}.forge-buy{grid-column:1/-1;display:flex;gap:6px} .forge-status{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:#e7f4ea;color:#1f5a3a;font-weight:600}.forge-status[data-ok="false"]{background:#f8e3de;color:#9a3323} .forge-flash{animation:forge-flash .6s ease-out}@keyframes forge-flash{0%{transform:scale(1.04);box-shadow:0 0 0 0 #f3c95a}100%{transform:none;box-shadow:0 0 0 14px #f3c95a00}} #buff-line{position:fixed;left:104px;top:142px;padding:3px 10px;border-radius:999px;background:rgba(13,35,40,.78);border:1px solid #c9b87a66;color:#ffe2a8;font-size:12px;z-index:5;pointer-events:none}#buff-line[hidden]{display:none} /* 0.1.203 Forge Table: floating enhance / fuse windows with drop slots */ .forge-window{position:fixed;left:max(8px,calc(50% - 560px));top:10vh;margin:0;width:340px;max-width:94vw;padding:0 0 12px;border:2px solid #7d7460;border-radius:10px;background:radial-gradient(ellipse at 50% 30%,#4f5d60 0,#333f43 55%,#262f33 100%);color:#efe7d2;box-shadow:0 14px 40px #000a,inset 0 0 0 1px #1a2023;z-index:40;user-select:none} .forge-window::backdrop{display:none} .forge-window-head{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid #7d746088;background:linear-gradient(180deg,#5a5142,#3b352b);border-radius:8px 8px 0 0;cursor:grab} .forge-window-head img{width:34px;height:34px}.forge-window-head h2{margin:0;flex:1;font-size:18px;color:#fff3d0;text-shadow:0 2px 3px #000} .forge-window-close{width:28px;height:28px;border-radius:6px;border:1px solid #7d7460;background:#2a3033;color:#e9dfc6;font-size:18px;line-height:1} .forge-board{position:relative;height:250px;margin:10px 14px 6px;border-radius:8px;background:radial-gradient(circle at 50% 50%,#56666a 0,#3a474b 60%,#2c373a 100%);box-shadow:inset 0 0 0 1px #1c2427,inset 0 0 30px #0006} .forge-board::before,.forge-board::after{content:"";position:absolute;background:#d9cfae55}.forge-board::before{left:18%;right:18%;top:50%;height:2px}.forge-board::after{top:14%;bottom:14%;left:50%;width:2px} #fuse-window .forge-board{height:130px}#fuse-window .forge-board::after{display:none} .forge-slot{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;padding:4px;border-radius:9px;border:2px solid #8f8669;background:#1b2225;color:#cfc6a8;font-size:11px;line-height:1.25;display:grid;place-items:center;z-index:1} .forge-slot img{width:100%;height:100%;object-fit:contain;pointer-events:none}.forge-slot.filled{border-color:#e6c66a;box-shadow:0 0 12px #e6c66a66} .forge-slot.zone-drop-target{border-color:#7fe0b8;box-shadow:0 0 0 3px #7fe0b855,0 0 16px #7fe0b8} .forge-slot.s-mid{left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;border-color:#d9cfae;box-shadow:0 0 0 6px #d9cfae22} .forge-slot.s-top{left:50%;top:17%}.forge-slot.s-bottom{left:50%;top:83%}.forge-slot.s-left{left:16%;top:50%}.forge-slot.s-right{left:84%;top:50%} .forge-slot.unused{opacity:.38;filter:grayscale(.85);cursor:not-allowed}.forge-slot.unused.filled{opacity:1;filter:none}/* 0.1.271: stone places the fused rows do not need */ .forge-readout{margin:0 16px;min-height:74px;font-size:13px;line-height:1.5}.forge-readout b{display:block;color:#ffe9a8;font-size:14.5px}.forge-readout p{margin:1px 0}.forge-readout .rate{color:#9ff0c8;font-weight:600}.forge-readout .warn{color:#ffb39a} .forge-rows{margin:4px 0;padding-left:20px}.forge-rows li{color:#9aa39f}.forge-rows li.on{color:#d9b8ff;font-weight:600} .forge-window-cost{display:flex;justify-content:space-between;gap:10px;margin:8px 16px 0;padding:6px 10px;border-radius:6px;background:#161c1e;font-size:12.5px}.forge-window-cost b{color:#ffe08a;text-align:right} .forge-window-ask{margin:8px 16px 2px;text-align:center;min-height:20px;font-size:14px;color:#fff} .forge-window-guard{display:flex;gap:8px;align-items:center;margin:4px 16px;font-size:12.5px}.forge-window-guard[hidden]{display:none} .forge-window-actions{display:flex;justify-content:center;gap:34px;margin-top:4px}.forge-window-actions button{min-width:84px;padding:6px 10px;border:0;background:none;color:#fff3d0;font-weight:700;font-size:16px;text-shadow:0 2px 3px #000}.forge-window-actions button:disabled{color:#8a8a80}.forge-window-actions button:not(:disabled):hover{color:#ffd76a} .forge-window-status{margin:8px 14px 0;padding:7px 10px;border-radius:7px;background:#1f3a2e;color:#b9f5d4;font-size:13px;text-align:center}.forge-window-status[data-ok="false"]{background:#43241f;color:#ffc3b3}.forge-window-status[hidden]{display:none} .forge-choose{display:grid;grid-template-columns:1fr 1fr;gap:10px}.forge-choose button{display:grid;gap:3px;padding:12px}.forge-choose button small{font-weight:400;opacity:.85} /* 0.1.204 Shattered Luck: the result of an attempt, shown over the game */ #forge-veil{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,rgba(255,226,150,.2),rgba(8,14,18,.42) 60%);overflow:hidden;cursor:pointer} #forge-veil[hidden]{display:none}#forge-veil[data-win="false"]{background:radial-gradient(circle at 50% 46%,rgba(255,90,70,.14),rgba(18,6,6,.4) 60%)} .forge-rays{position:absolute;left:50%;top:46%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:repeating-conic-gradient(from 0deg,rgba(255,236,170,.22) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 42%);mask:radial-gradient(circle,#000 0,transparent 42%);opacity:0} #forge-veil.play .forge-rays{animation:forge-rays 2.6s ease-out forwards}#forge-veil[data-win="false"] .forge-rays{display:none} .forge-burst{position:relative;display:grid;justify-items:center;gap:10px;transform:translateY(-4vh);text-align:center} .forge-burst-art{position:relative;width:132px;height:132px;display:grid;place-items:center}.forge-burst-art img{width:118px;height:118px;border-radius:22px;box-shadow:0 0 0 3px #ffe9a8,0 0 44px 14px rgba(255,214,110,.75);object-fit:contain;background:#1a2428} #forge-veil.play .forge-burst-art img{animation:forge-pop .7s cubic-bezier(.2,1.6,.4,1) both} .forge-burst-art i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:radial-gradient(circle,#fff,#ffd76a 55%,transparent 70%);opacity:0} #forge-veil.play .forge-burst-art i{animation:forge-spark 1.1s ease-out both} .forge-burst b{font:800 42px/1.1 "Leelawadee UI",Tahoma,sans-serif;color:#fff6d0;letter-spacing:1px;text-shadow:0 0 18px #ffb300,0 0 4px #7a3b00,0 3px 0 #7a3b00} .forge-burst span{font-size:17px;color:#fff;text-shadow:0 2px 4px #000,0 0 10px #000} #forge-veil.play .forge-burst b{animation:forge-pop .6s .12s cubic-bezier(.2,1.6,.4,1) both} #forge-veil[data-win="false"] .forge-burst b{color:#ffd0c4;text-shadow:0 0 16px #c81e1e,0 3px 0 #4a0808} #forge-veil[data-win="false"] .forge-burst-art img{filter:grayscale(1) brightness(.6);box-shadow:0 0 0 3px #7a2a2a,0 0 34px 8px rgba(200,40,40,.55)}#forge-veil[data-win="false"] .forge-burst-art i{display:none} #forge-veil[data-win="false"].play .forge-burst-art img{animation:forge-break .9s ease-in both} @keyframes forge-rays{0%{opacity:0;transform:rotate(0) scale(.6)}15%{opacity:1}80%{opacity:.8}100%{opacity:0;transform:rotate(50deg) scale(1.1)}} @keyframes forge-pop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}} @keyframes forge-spark{0%{opacity:1;transform:rotate(var(--a)) translateX(10px) scale(1.2)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.3)}} @keyframes forge-break{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.06) rotate(-4deg)}45%{transform:scale(1.06) rotate(5deg)}100%{transform:scale(.7) rotate(12deg) translateY(30px);opacity:.25}} @media(max-width:600px){.forge-burst b{font-size:28px}} /* 0.1.205 Open Hand: NPC choice menu, set-aside bag items, world news */ #npc-talk-dialog{width:min(430px,92vw)} .npc-talk-line{margin:2px 0 12px;font-size:15px;line-height:1.6;color:#4a3a22;font-style:italic} .npc-talk-options{display:grid;gap:9px} .npc-talk-options button{display:grid;gap:2px;padding:11px 14px;text-align:left;border-radius:12px} .npc-talk-options button b{font-size:15.5px}.npc-talk-options button small{font-weight:400;font-size:12.5px;opacity:.85} .npc-talk-options .npc-talk-bye{border:1px solid #cfaa66;background:#fffaf0;color:#6b4a1c;text-align:center} html body #bag-dialog .inventory-slot.reserved{opacity:.32;filter:grayscale(1);cursor:not-allowed} html body #bag-dialog .inventory-slot.reserved::after{content:"วางอยู่";position:absolute;inset:auto 0 2px 0;font-size:9.5px;text-align:center;color:#3a2a14;font-weight:700} html body #bag-dialog .inventory-slot.reserved .slot-qty{display:none} #chat-lines .chat-announce{color:#ffd97a;font-weight:700;text-shadow:0 1px 2px #000} #news-ticker{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;z-index:60;max-width:min(680px,calc(100vw - 420px));min-width:200px;display:flex;gap:10px;align-items:center;padding:7px 18px 7px 8px;border-radius:999px;border:1px solid #f2d48a99;background:linear-gradient(90deg,rgba(40,24,6,.86),rgba(22,34,40,.86));color:#fff3cf;font-size:14px;box-shadow:0 4px 18px rgba(0,0,0,.35),inset 0 0 14px rgba(255,200,90,.16);pointer-events:none;opacity:0;transform:translate(-50%,-140%);transition:transform .45s cubic-bezier(.2,1.2,.4,1),opacity .35s} #news-ticker.show{opacity:1;transform:translate(-50%,0)} #news-ticker b{flex:none;padding:3px 11px;border-radius:999px;background:linear-gradient(#ffe29a,#e0a93a);color:#4a2b00;font-size:12px} #news-ticker span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000} @media(max-width:900px){#news-ticker{max-width:calc(100vw - 24px);font-size:12px;top:calc(4px + env(safe-area-inset-top,0px))}} .forge-window .forge-window-guard{justify-content:flex-start;text-align:left;line-height:1.35} .forge-window .forge-window-guard input{flex:none;width:16px;height:16px;min-width:0;margin:0;padding:0;accent-color:#e0a93a} .forge-window .forge-window-guard span{flex:1} /* 0.1.207 Proving Ground: compact shop cards (picture, name, price) */ html body #npc-dialog.menu-window #shop{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px} html body #npc-dialog.menu-window #shop .shop-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;margin:0;text-align:center} #shop .shop-card .shop-art{display:grid;place-items:center;width:72px;height:72px;cursor:help;border-radius:12px} #shop .shop-card .shop-art:focus-visible{outline:2px solid #c08a2e} html body #npc-dialog.menu-window #shop .shop-card .item-art{width:68px;height:68px;object-fit:contain;background:none;filter:drop-shadow(0 4px 5px rgba(60,40,10,.35))} #shop .shop-card b{font-size:13.5px;line-height:1.25;min-height:2.5em;display:flex;align-items:center;color:#5a3d1c} html body #npc-dialog.menu-window #shop .shop-card button{width:100%;padding:7px 4px;font-weight:700} html.touch-device #npc-dialog.menu-window #shop{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))} /* 0.1.208 Stone Steps: marks on forged items */ .forge-mark-host,.forge-slot,.vendor-slot{position:relative} .forge-gem{position:absolute;right:4px;top:4px;width:9px;height:9px;transform:rotate(45deg);border-radius:2px;background:linear-gradient(135deg,#f3dcff,#a45cf0 55%,#6a2bc0);box-shadow:0 0 0 1px #3d1a70,0 0 6px #c58bff;pointer-events:none} .forge-slot .forge-plus,.forge-mark-host .forge-plus,.vendor-slot .forge-plus{left:4px;top:3px} /* 0.1.212: item shop menu (no goods yet) */ .side-menu #item-shop-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/item-shop-open.svg?v=0.1.212) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} #hud .side-menu #side-menu-items #item-shop-open::after{content:"ร้านไอเทม"} #item-shop-dialog{width:min(720px,94vw)} .item-shop-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px} .item-shop-tabs button{padding:8px 16px;border-radius:999px;border:1px solid #d9b46a;background:#fff8e6;color:#5b3a12;font-weight:700} .item-shop-tabs button[aria-selected="true"]{background:linear-gradient(#ffe9a8,#f0b94a);border-color:#b8791c;box-shadow:0 2px 0 #b8791c} .item-shop-tabs button:disabled{opacity:.5} .item-shop-empty{display:grid;justify-items:center;gap:6px;padding:34px 18px;border:1px dashed #d9b46a;border-radius:14px;background:#fffaf0;text-align:center;color:#5b3a12} .item-shop-empty img{width:96px;height:96px;filter:drop-shadow(0 6px 8px #0003)} .item-shop-empty h3{margin:6px 0 0;font-size:20px}.item-shop-empty p{margin:0;max-width:44ch} /* 0.1.212: damage numbers with depth: gradient face, dark rim, drop shadow and a small pop */ .floater{text-shadow:none;position:absolute;font:900 28px/1 "Trebuchet MS",Tahoma,system-ui,sans-serif;letter-spacing:.5px;transform:translate(-50%,-50%);color:#fff0ac;background:linear-gradient(180deg,#fffbe0 8%,#ffd95a 48%,#ff9a1f 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 0 1px #4a1d00) drop-shadow(1.5px 0 0 #4a1d00) drop-shadow(-1.5px 0 0 #4a1d00) drop-shadow(0 1.5px 0 #4a1d00) drop-shadow(0 -1.5px 0 #4a1d00) drop-shadow(0 4px 3px #0009);animation:floater-pop .34s cubic-bezier(.2,1.6,.4,1) both;will-change:transform,opacity} .floater.floater-hurt{background-image:linear-gradient(180deg,#ffe1dc 8%,#ff6a55 50%,#c2162a 94%);filter:drop-shadow(0 0 1px #3d0008) drop-shadow(1.5px 0 0 #3d0008) drop-shadow(-1.5px 0 0 #3d0008) drop-shadow(0 1.5px 0 #3d0008) drop-shadow(0 -1.5px 0 #3d0008) drop-shadow(0 4px 3px #0009)} .floater.floater-heal{background-image:linear-gradient(180deg,#f2fff6 8%,#7df0b0 50%,#14a368 94%);filter:drop-shadow(0 0 1px #00361f) drop-shadow(1.5px 0 0 #00361f) drop-shadow(-1.5px 0 0 #00361f) drop-shadow(0 1.5px 0 #00361f) drop-shadow(0 -1.5px 0 #00361f) drop-shadow(0 4px 3px #0009)} .floater.floater-skill{font-size:32px;background-image:linear-gradient(180deg,#f4fbff 8%,#7fd0ff 46%,#4b6dff 92%);filter:drop-shadow(0 0 1px #0b1a55) drop-shadow(1.5px 0 0 #0b1a55) drop-shadow(-1.5px 0 0 #0b1a55) drop-shadow(0 1.5px 0 #0b1a55) drop-shadow(0 -1.5px 0 #0b1a55) drop-shadow(0 0 7px #58a6ff99) drop-shadow(0 4px 3px #0009)} .floater.floater-evade{font-size:22px;background-image:linear-gradient(180deg,#ffffff,#c9d6e2);filter:drop-shadow(0 0 1px #1c2a36) drop-shadow(1px 0 0 #1c2a36) drop-shadow(-1px 0 0 #1c2a36) drop-shadow(0 3px 2px #0008)} .floater.floater-crit{font-size:44px;color:#ffd24a;background-image:linear-gradient(180deg,#fffde8 6%,#ffe14a 36%,#ff7a1a 68%,#e0201a 96%);text-shadow:none;filter:drop-shadow(0 0 1px #4a0b00) drop-shadow(2px 0 0 #4a0b00) drop-shadow(-2px 0 0 #4a0b00) drop-shadow(0 2px 0 #4a0b00) drop-shadow(0 -2px 0 #4a0b00) drop-shadow(0 0 10px #ff9b2fcc) drop-shadow(0 5px 4px #000a);animation:floater-crit .42s cubic-bezier(.2,1.8,.4,1) both} @keyframes floater-pop{0%{scale:.45}60%{scale:1.18}100%{scale:1}} @keyframes floater-crit{0%{scale:.3;rotate:-9deg}55%{scale:1.4;rotate:4deg}100%{scale:1;rotate:-2deg}} @media (prefers-reduced-motion:reduce){.floater,.floater.floater-crit{animation:none}} .roster-appearance-fields label:first-child{grid-column:1/-1} /* 0.1.222 side menu: there are eleven icons now. Icon size and gap follow the window height so the column always ends above the bottom edge; on very short windows it wraps into a second column. */ html:not(.touch-device) body{--mg:clamp(2px,calc((100dvh - 560px) / 50),8px);--mi:clamp(24px,calc((100dvh - 392px - 10 * var(--mg)) / 11),50px)} html:not(.touch-device) body #hud .side-menu{top:300px!important;bottom:18px!important;justify-content:flex-end;align-items:flex-end;overflow:visible} html:not(.touch-device) body #hud #side-menu-items{display:flex!important;flex-flow:column wrap-reverse;align-content:flex-start;align-items:center;gap:var(--mg)!important;width:auto!important;min-width:76px;max-height:calc(100dvh - 300px - 18px - 52px)!important;padding:4px 0!important;overflow:visible!important} html:not(.touch-device) body #hud #side-menu-items>div{display:contents} html:not(.touch-device) body #hud #side-menu-items #sound-open{margin-top:calc(var(--mg) + 4px)!important} html:not(.touch-device) body #hud #menu-toggle{margin-top:6px;margin-right:17px;margin-inline-start:auto} @media(max-height:620px){html:not(.touch-device) body #hud .side-menu{top:268px!important}html:not(.touch-device) body #hud #side-menu-items{max-height:calc(100dvh - 268px - 18px - 52px)!important}html:not(.touch-device) #chain-tracker{right:142px}} /* 0.1.222 quest tracker: can be folded to a tab */ #chain-tracker{right:86px} #chain-tracker .chain-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}#chain-tracker .chain-head strong{margin:0} #chain-tracker .chain-toggle{pointer-events:auto;flex:none;min-width:26px;height:26px;padding:0 6px;border-radius:13px;border:1px solid #c9b87a88;background:#173a40;color:#edd1a0;font-size:15px;line-height:1;cursor:pointer} #chain-tracker .chain-toggle:hover{filter:brightness(1.25)} #chain-tracker.shut{width:auto;max-height:none;overflow:visible;padding:0;border:0;background:none} #chain-tracker.shut .chain-toggle{height:30px;padding:0 12px;font-size:12.5px;background:rgba(13,35,40,.82);box-shadow:0 2px 5px #00182055} html.touch-device #chain-tracker .chain-toggle{min-width:32px;height:32px} html.touch-device #chain-tracker{left:calc(var(--edge-left,0px) + 8px);right:auto;top:calc(var(--edge-top,0px) + 74px);width:min(210px,46vw);max-height:30vh;z-index:7} /* 0.1.222 phone menu: a tidy grid, five to a row; icons sized to their buttons */ html.touch-device #hud #side-menu-items:not([hidden]){display:grid!important;grid-template-columns:repeat(5,44px);grid-auto-rows:44px;gap:8px!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;max-height:none!important;padding:10px!important;overflow:visible!important;border:1px solid #d8b977!important;border-radius:16px!important;background:#204c43f2!important;box-shadow:0 8px 24px #0c292a66!important} html.touch-device #hud #side-menu-items button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important} html.touch-device body .side-menu :is(#map-open,#quest-menu,#character-open,#bag-open,#help-open,#skills-open,#journal-open,#item-shop-open,#guild-open,#mail-open,#sound-open,#fullscreen,#logout)::before{width:38px!important;height:38px!important} html.touch-device #hud .side-menu #side-menu-items button::after{display:none!important} /* 0.1.225: the two sides show in the name over each character */ #labels .label[data-faction=dawn]{color:#ffe29a;text-shadow:0 0 6px rgba(255,190,80,.55),0 1px 2px #2a1d06} #labels .label[data-faction=dusk]{color:#d9c2ff;text-shadow:0 0 6px rgba(150,100,255,.6),0 1px 2px #160c2a} #labels .label[data-faction=dawn]::before{content:'☀ ';color:#ffcf5a} #labels .label[data-faction=dusk]::before{content:'☾ ';color:#b48cff} .faction-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:700} .faction-badge.dawn{background:#5a4210;color:#ffe29a}.faction-badge.dusk{background:#2c1c55;color:#dccaff} #npc-talk-dialog .npc-talk-options button.armed{outline:2px solid #ffd77a;box-shadow:0 0 12px rgba(255,210,120,.5)} #help-dialog .codex-link{margin:0 0 12px}#help-dialog .codex-link a{display:block;padding:10px 12px;border-radius:12px;background:rgba(233,204,142,.14);border:1px solid rgba(233,204,142,.4);color:#ffe6b0;font-weight:700;text-decoration:none} /* 0.1.231: floating menu windows (map, quest book, monster book, how to play, sound): centred until dragged, no backdrop */ html body dialog.menu-window.float-window[open]:not(:modal){position:fixed;inset:0;margin:auto;z-index:80;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);box-shadow:0 18px 60px #071b2390} html body dialog.float-window .menu-header.window-drag-handle{cursor:grab} html body dialog.float-window .menu-header.window-drag-handle:active{cursor:grabbing} /* 0.1.239 rage bar */#hud #player-panel .meter.rage{height:9px;margin-top:3px}#hud #player-panel .meter.rage i{background:linear-gradient(90deg,#8e2b1f,#e0662e 60%,#ffc35a)}#hud #player-panel .meter.rage span{font-size:9px;line-height:8px}#hud #player-panel .meter.rage.burst i{animation:rage-glow .6s ease-in-out infinite alternate}@keyframes rage-glow{from{filter:brightness(1)}to{filter:brightness(1.6) saturate(1.4)}} /* 0.1.240 rage burst: taller bar with the countdown, glowing portrait */ #hud #player-panel .meter.rage.burst{height:14px;box-shadow:0 0 10px #ff7a2e99}#hud #player-panel .meter.rage.burst span{font-size:10px;line-height:13px;font-weight:700;color:#fff6e0;text-shadow:0 1px 2px #000} #hud #player-panel:has(.meter.rage.burst) .portrait-frame{border-radius:50%;box-shadow:0 0 0 3px #ff8a3a,0 0 18px #ff5a1f;animation:rage-glow .6s ease-in-out infinite alternate} /* 0.1.240: the forge windows' slots sit on the board again (a 0.1.208 rule had made them flow) */ .forge-window .forge-board .forge-slot{position:absolute} .forge-window .forge-readout{margin:6px 16px 0;padding:8px 10px;border-radius:6px;background:#1b2326aa;min-height:0} .forge-window .forge-readout:empty{display:none} .forge-window .forge-window-ask{line-height:1.45} /* 0.1.240: poison from an element */ .floater.floater-poison{font-size:20px;background-image:linear-gradient(180deg,#d9ffb8,#4caf50);filter:drop-shadow(0 0 1px #12320f) drop-shadow(1px 0 0 #12320f) drop-shadow(-1px 0 0 #12320f) drop-shadow(0 3px 2px #0008)} .forge-window .forge-window-cost{align-items:flex-start}.forge-window .forge-window-cost span{flex:none}.forge-window .forge-window-cost b{flex:1;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4} /* 0.1.241: the paper doll with earrings, a second ring and inner armour: five slots a side, three below */ @media (min-width:700px){ html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241{grid-template-columns:74px minmax(110px,1fr) 74px!important;grid-template-rows:repeat(5,58px) 58px!important;gap:5px!important;height:auto!important;min-height:0!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]{width:auto;justify-self:stretch;min-height:0;padding:3px 2px} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .character-pane{grid-area:1/2/6/3!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="l1"]{grid-area:1/1}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="l2"]{grid-area:2/1}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="l3"]{grid-area:3/1}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="l4"]{grid-area:4/1}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="l5"]{grid-area:5/1} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="r1"]{grid-area:1/3}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="r2"]{grid-area:2/3}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="r3"]{grid-area:3/3}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="r4"]{grid-area:4/3}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="r5"]{grid-area:5/3} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="b1"]{grid-area:6/1}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="b2"]{grid-area:6/2;width:74px;justify-self:center}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos="b3"]{grid-area:6/3} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot>div{width:30px!important;height:30px!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot .item-art{width:26px;height:26px} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot>span{font-size:9px!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot button{font-size:9px;padding:1px 4px}} @media (min-width:700px){ html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .character-pane{width:auto!important;min-width:0!important;height:auto!important;align-self:stretch!important;justify-self:stretch!important;display:block!important;position:relative} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .character-pane canvas{width:100%!important;height:100%!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]>p{display:none} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]>span{line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}} @media (min-width:700px){html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 #shared-character-preview{width:auto!important;min-width:0!important;height:auto!important;justify-self:stretch!important;align-self:stretch!important;grid-area:1/2/6/3!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241{grid-template-rows:repeat(5,62px) 62px!important}} @media (min-width:700px){html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 #shared-character-preview{position:absolute!important;inset:2px!important}} @media (min-width:700px){html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241{grid-template-rows:repeat(6,56px)!important;gap:4px!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]{gap:1px!important;padding:2px 2px!important;justify-content:flex-start!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]>span{font-size:8.5px!important;line-height:10px!important;margin:0!important;color:#7a5a1e} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]>div{width:26px!important;height:26px!important;margin:0!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos] .item-art{width:22px!important;height:22px!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos] button{font-size:8.5px!important;line-height:12px!important;padding:0 6px!important;margin:0!important;min-height:0!important}} @media (min-width:700px){html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]{overflow:visible!important;padding-top:4px!important}} @media (min-width:700px){html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241 .gear-slot[data-pos]>*{flex-shrink:0!important}} /* 0.1.242: item cards above the window's own title bar */ html body dialog.menu-window .bag-item-tooltip{z-index:60!important} /* 0.1.242: a compact bag in the manner of the source game: equipment on the left, a grid of small cells on the right; the window never grows past the screen and the grid scrolls inside it */ @media (min-width:900px){ html body #bag-dialog.menu-window.workshop-window[open]{width:min(720px,calc(100vw - 24px))!important;height:auto!important;max-height:calc(100dvh - 100px)!important;display:flex!important;flex-direction:column} html body #bag-dialog.menu-window.workshop-window .menu-body{flex:1 1 auto;min-height:0;overflow:hidden!important;display:flex;flex-direction:column} html body #bag-dialog.menu-window.workshop-window .bag-layout{grid-template-columns:330px minmax(0,1fr)!important;gap:10px!important;flex:1 1 auto;min-height:0;align-items:stretch!important} html body #bag-dialog.menu-window.workshop-window .bag-items{display:flex;flex-direction:column;min-height:0} html body #bag-dialog.menu-window.workshop-window .bag-scroll{flex:1 1 auto;min-height:120px;max-height:calc(100dvh - 330px)!important;overflow:auto!important} html body #bag-dialog.menu-window.workshop-window #inventory{grid-template-columns:repeat(6,48px)!important;grid-auto-rows:48px!important;gap:5px!important;justify-content:center} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot{width:48px!important;height:48px!important;min-height:0!important;padding:0!important} html body #bag-dialog.menu-window.workshop-window .bag-filters{flex-wrap:wrap;gap:4px}html body #bag-dialog.menu-window.workshop-window .bag-filters button{padding:3px 9px;font-size:12px} html body #bag-dialog.menu-window.workshop-window .bag-hint,html body #bag-dialog.menu-window.workshop-window .bag-items>p.muted{font-size:10.5px}} /* 0.1.245: the bag of the source game: no figure (the character window shows it), the worn slots in a tidy 3 x 5 board with the cloak on top, and the bag grid exactly six squares wide (no side scroll). */ html body #bag-dialog #shared-character-preview{display:none!important} html body #bag-dialog.menu-window.workshop-window[open]{width:min(612px,calc(100vw - 16px))!important} html body #bag-dialog.menu-window.workshop-window .bag-layout{grid-template-columns:226px minmax(0,1fr)!important;gap:10px!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245{display:grid!important;grid-template-columns:repeat(3,64px)!important;grid-template-rows:repeat(5,62px)!important;gap:4px!important;justify-content:center!important;height:auto!important;min-height:0!important;padding:6px 4px!important;background:none!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos]{width:64px!important;height:62px!important;justify-self:center!important;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start!important;gap:1px!important;padding:4px 2px 2px!important;overflow:visible!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="l1"]{grid-area:1/1!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="c1"]{grid-area:1/2!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="r1"]{grid-area:1/3!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="l2"]{grid-area:2/1!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="c2"]{grid-area:2/2!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="r2"]{grid-area:2/3!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="l3"]{grid-area:3/1!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="c3"]{grid-area:3/2!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="r3"]{grid-area:3/3!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="l4"]{grid-area:4/1!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="c4"]{grid-area:4/2!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="r4"]{grid-area:4/3!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="l5"]{grid-area:5/1!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos="c5"]{grid-area:5/2!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos]>span{font-size:9px!important;line-height:11px!important;margin:0!important;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#7a5a1e} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos]>div{width:28px!important;height:28px!important;margin:0!important;flex-shrink:0} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos] .item-art,html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos]>div img{width:26px!important;height:26px!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos]>p{display:none!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-245 .gear-slot[data-pos] button{font-size:9px!important;line-height:13px!important;height:14px!important;min-height:0!important;padding:0 7px!important;margin:0!important;flex-shrink:0} html body #bag-dialog.menu-window.workshop-window .bag-items{min-width:0;overflow:hidden} html body #bag-dialog.menu-window.workshop-window .bag-scroll{overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable;padding:2px 0!important} html body #bag-dialog.menu-window.workshop-window #inventory{grid-template-columns:repeat(6,46px)!important;grid-auto-rows:46px!important;gap:5px!important;justify-content:start!important;width:max-content} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot{width:46px!important;height:46px!important} @media (max-width:640px){html body #bag-dialog.menu-window.workshop-window .bag-layout{grid-template-columns:1fr!important}} /* 0.1.246: item card rows: name, series (small), forge additions in their own colour */ html body .bag-item-tooltip>div{white-space:pre-line} html body .bag-item-tooltip>.tip-name{font-weight:700;font-size:14px;line-height:1.3} html body .bag-item-tooltip>.tip-series{font-size:11px;opacity:.72;margin:-1px 0 4px} html body .bag-item-tooltip>.tip-worked{color:#7fe0ff;font-weight:600} html body .bag-item-tooltip>.tip-set{color:#b6e28a} html body .forge-series{display:block;font-size:11px;opacity:.75;margin:0 0 4px} html body .forge-rows li.on{color:#7fe0ff;font-weight:600} /* 0.1.246: the bag of the source game: one upright window, the worn slots on a bronze board shaped like the body (earrings and necklace at the neck, rings beside the robe, the cloak and inner armour below), no names on the slots (point at one to see it; double-click or right-click takes it off), the bag grid below, seven squares wide, fully inside the frame. */ html body #bag-dialog.menu-window.workshop-window[open]{width:min(392px,calc(100vw - 16px))!important} html body #bag-dialog.menu-window.workshop-window .bag-layout{grid-template-columns:1fr!important;gap:8px!important} html body #bag-dialog.menu-window.workshop-window .equipment-pane{padding:8px!important;background:radial-gradient(ellipse at 50% 40%,#5a4022 0%,#3a2a17 55%,#24190d 100%)!important;border:1px solid #8a6a36!important;border-radius:14px!important;box-shadow:inset 0 0 0 1px #c9a25c55,inset 0 6px 18px #0008,0 2px 6px #0003!important} html body #bag-dialog.menu-window.workshop-window .equipment-pane>h3,html body #bag-dialog.menu-window.workshop-window .equipment-pane>.muted{display:none!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241.board-246{position:relative;display:grid!important;grid-template-columns:repeat(5,52px)!important;grid-template-rows:repeat(3,52px)!important;gap:15px 10px!important;justify-content:center!important;padding:8px 4px 14px!important;background:none!important;height:auto!important;min-height:0!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246::before{content:"";position:absolute;left:50%;top:2px;width:76px;height:calc(100% - 4px);transform:translateX(-50%);border-radius:38px 38px 14px 14px;background:linear-gradient(#e8c98a22,#e8c98a08);box-shadow:inset 0 0 0 1px #e8c98a22;pointer-events:none} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241.board-246 .gear-slot[data-pos]{position:relative;width:52px!important;height:52px!important;padding:0!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;background:radial-gradient(circle at 50% 35%,#4b3a24,#1f160c)!important;border:1px solid #a7834a!important;box-shadow:inset 0 2px 6px #000a,inset 0 -1px 0 #ffffff18,0 1px 0 #ffe7b322!important;overflow:visible!important;cursor:pointer} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos]:hover{border-color:#f2cf7f!important;box-shadow:0 0 0 2px #f2cf7f66,inset 0 2px 6px #000a!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos]>span{position:absolute;left:0;right:0;bottom:-11px;font-size:8px!important;line-height:10px!important;text-align:center;color:#e8d3a4!important;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos]>div{width:42px!important;height:42px!important;margin:0!important;display:flex;align-items:center;justify-content:center;color:#a7834a66;font-size:18px;border:0!important;background:none!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos] .item-art,html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos]>div img{width:40px!important;height:40px!important;filter:drop-shadow(0 2px 2px #000a)} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos]>p,html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos]>button{display:none!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="a1"]{grid-area:1/1!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="a2"]{grid-area:1/2!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="a3"]{grid-area:1/3!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="a4"]{grid-area:1/4!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="a5"]{grid-area:1/5!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="b1"]{grid-area:2/1!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="b2"]{grid-area:2/2!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="b3"]{grid-area:2/3!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="b4"]{grid-area:2/4!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="b5"]{grid-area:2/5!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="c1"]{grid-area:3/1!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="c2"]{grid-area:3/2!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="c3"]{grid-area:3/3!important}html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="c4"]{grid-area:3/5!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos="b3"]{border-color:#e2bd6e!important;box-shadow:0 0 10px #e2bd6e44,inset 0 2px 6px #000a!important} html body #bag-dialog.menu-window.workshop-window #equipment-stat{color:#f3e2b8!important;background:#0000!important;border:0!important;font-size:11px!important;margin:12px 0 0!important;text-align:center} html body #bag-dialog.menu-window.workshop-window .bag-items{padding:8px!important} html body #bag-dialog.menu-window.workshop-window .bag-scroll{overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:auto!important;max-height:min(232px,calc(100dvh - 470px))!important;min-height:140px;padding:0!important} html body #bag-dialog.menu-window.workshop-window #inventory{grid-template-columns:repeat(7,40px)!important;grid-auto-rows:40px!important;gap:4px!important;width:auto!important;justify-content:start!important} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot{width:40px!important;height:40px!important;border-radius:9px!important} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot .slot-qty{font-size:9px!important;line-height:11px!important} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot .forge-plus{font-size:10px} html body #bag-dialog.menu-window.workshop-window .bag-filters button{padding:2px 8px!important;font-size:11.5px!important} html body #bag-dialog.menu-window.workshop-window .bag-hint{display:none!important} /* 0.1.247: bag squares as large as the worn slots, all 36 in a 6 x 6 block with no scrolling; the window grows a little taller instead. The character figure never shows inside the bag. */ html body #bag-dialog.menu-window.workshop-window[open]{width:min(412px,calc(100vw - 16px))!important;max-height:calc(100dvh - 24px)!important} html body #bag-dialog.menu-window.workshop-window .bag-scroll{max-height:none!important;min-height:0!important;overflow:visible!important} html body #bag-dialog.menu-window.workshop-window #inventory{grid-template-columns:repeat(6,52px)!important;grid-auto-rows:52px!important;gap:5px!important;justify-content:center!important;width:auto!important} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot{width:52px!important;height:52px!important} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot .slot-qty{font-size:10px!important} html body #bag-dialog.menu-window.workshop-window .menu-body{overflow:auto!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241.board-246 #shared-character-preview,html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241.board-246 .character-pane{display:none!important;visibility:hidden!important} /* 0.1.249: the whole bag fits the screen with room under the last row: one square size (--cell) for the worn slots and the 36 bag squares, as large as 52px and smaller only on short screens. The name / level / coin strip sits in the middle of its gold band, clear of the edges. */ html body #bag-dialog.menu-window.workshop-window{--cell:clamp(38px,calc((100dvh - 460px) / 9),52px)} html body #bag-dialog.menu-window.workshop-window .bag-items,html body #bag-dialog.menu-window.workshop-window .bag-scroll{height:auto!important;max-height:none!important;overflow:visible!important} html body #bag-dialog.menu-window.workshop-window[open]{max-height:calc(100dvh - 16px)!important} html body #bag-dialog.menu-window.workshop-window .menu-body{display:flex!important;flex-direction:column;min-height:0;padding:10px 12px 16px!important;overflow-y:auto!important;overflow-x:hidden!important} html body #bag-dialog.menu-window.workshop-window .bag-summary{display:flex!important;align-items:center!important;justify-content:space-between!important;box-sizing:border-box;min-height:34px;padding:0 16px!important;margin:0 0 10px!important;border-radius:999px;line-height:1.25!important;font-size:12.5px!important} html body #bag-dialog.menu-window.workshop-window .bag-summary>*{display:block;margin:0!important;padding:0!important;line-height:1.25!important} html body #bag-dialog.menu-window.workshop-window #inventory{grid-template-columns:repeat(6,var(--cell))!important;grid-auto-rows:var(--cell)!important;padding-bottom:4px!important} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot{width:var(--cell)!important;height:var(--cell)!important} html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot .item-art,html body #bag-dialog.menu-window.workshop-window #inventory .inventory-slot img{max-width:calc(var(--cell) - 10px)!important;max-height:calc(var(--cell) - 10px)!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241.board-246{grid-template-columns:repeat(5,var(--cell))!important;grid-template-rows:repeat(3,var(--cell))!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-241.board-246 .gear-slot[data-pos]{width:var(--cell)!important;height:var(--cell)!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos]>div{width:calc(var(--cell) - 10px)!important;height:calc(var(--cell) - 10px)!important} html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos] .item-art,html body #bag-dialog.menu-window.workshop-window .equipment-board.board-246 .gear-slot[data-pos]>div img{width:calc(var(--cell) - 12px)!important;height:calc(var(--cell) - 12px)!important} /* 0.1.249: the buffs on the character, under the coins */ .status-icons{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.status-icons[hidden]{display:none} .status-chip{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px 0 3px;border-radius:10px;background:linear-gradient(#2a4a42,#163029);border:1px solid #e2bd6e88;color:#f6e7c4;font-size:10px;line-height:1;box-shadow:0 1px 3px #0006} .status-chip i{font-style:normal;display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#e2bd6e;color:#2a1c06;font-size:9px} .status-chip small{font-size:10px;opacity:.9} .status-chip[data-kind="stance"] i{background:#ffb347} .target-status{display:inline-flex;gap:4px;margin-left:6px}.target-status span{font-size:10px;padding:1px 5px;border-radius:8px;background:#7a1f2a;color:#ffe3e3} /* 0.1.250 Storehouse: town shops and the warehouse */ .store-window{width:min(920px,calc(100vw - 20px));max-height:calc(var(--view-height,100dvh) - 16px);padding:0;background:#fff3d6;color:#49351f;overflow:hidden} .store-window .menu-body{max-height:calc(var(--view-height,100dvh) - 115px);overflow:auto;padding:14px} .store-gold{margin:0 0 10px;font-weight:700} .store-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .store-items article{display:grid;grid-template-columns:52px 1fr;gap:8px;border:1px solid #d6b575;background:#fffaf0;border-radius:10px;padding:10px} .store-items img{width:52px;height:52px}.store-items p{font-size:12px;margin:4px 0}.store-items button{grid-column:1/-1;min-height:36px} .vault-tabs{display:flex;gap:8px;margin-bottom:8px}.vault-tabs button{min-height:36px;padding:0 14px;border:1px solid #c9a464;border-radius:8px;background:#fffaf0;color:#49351f} .vault-tabs button.active{background:#8a5a22;color:#fff7e6;border-color:#8a5a22}.vault-tabs button:disabled{opacity:.5} .vault-status{min-height:22px;margin:4px 0} .vault-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.vault-columns h3{margin:0 0 8px;font-size:15px} .vault-list{display:grid;gap:6px;max-height:min(52vh,460px);overflow:auto;padding-right:2px} .vault-row{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;border:1px solid #d6b575;background:#fffaf0;border-radius:9px;padding:6px 8px} .vault-row img{width:40px;height:40px}.vault-row strong{display:block;font-size:13px}.vault-row small{font-size:12px;opacity:.8} .vault-move{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;justify-content:flex-end}.vault-move input{width:64px;padding:5px;min-height:30px}.vault-move button{min-height:32px;padding:0 12px} .vault-gold{margin-bottom:8px}.vault-gold .vault-move input{width:120px}.vault-no{font-size:12px;opacity:.7} html.touch-device .store-window .menu-header{min-height:46px;padding:7px 12px}html.touch-device .store-window .menu-body{max-height:calc(var(--view-height,100dvh) - 72px)} @media(max-width:640px){.store-items,.vault-columns{grid-template-columns:1fr}} .vault-window .vault-move>*{flex:0 0 auto;width:auto;margin:0}.vault-window .vault-move button{white-space:nowrap}.vault-window .vault-move input{min-height:32px} /* 0.1.253 Phase 6 social: guild (สำนัก) and mail (จดหมาย) windows, menu emblems, chat channels */ .side-menu #guild-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/guild-open.svg?v=0.1.253) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} .side-menu #mail-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/mail-open.svg?v=0.1.253) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} #hud .side-menu #side-menu-items #guild-open::after{content:"สำนัก [G]"}#hud .side-menu #side-menu-items #mail-open::after{content:"จดหมาย [N]"} #hud .side-menu #side-menu-items #mail-open.has-mail{box-shadow:0 0 0 2px #ffd65c,0 0 12px #ffd65c99} .chat-whisper{color:#ffc4f0}.chat-whisper b{color:#ff9be0}.chat-guild{color:#bdf5d6}.chat-guild b{color:#7fe8b0}.chat-world{color:#ffe7a8}.chat-world b{color:#ffcf5c} .guild-window,.mail-window{width:min(760px,calc(100vw - 20px))} .guild-window .menu-body,.mail-window .menu-body{display:block} .guild-status:empty,.mail-status:empty{min-height:0;margin:0} .guild-window h3,.mail-window h3{margin:10px 0 6px;font-size:15px;color:#5a3a12}.guild-window h4,.mail-window h4{margin:0 0 6px;font-size:13px;color:#6b4e23} .guild-window .muted,.mail-window .muted{font-size:12.5px;opacity:.78;margin:4px 0} .guild-inline{display:flex;gap:8px;align-items:center}.guild-inline input{flex:1 1 auto;min-width:0;min-height:34px;padding:4px 8px}.guild-inline button{flex:0 0 auto;white-space:nowrap;min-height:34px;padding:0 14px} .guild-field{display:grid;gap:4px;margin:6px 0;font-size:12.5px}.guild-field>span{font-weight:700;color:#6b4e23} .guild-field input,.guild-field textarea,.guild-notice textarea{width:100%;box-sizing:border-box;min-height:34px;padding:5px 8px;border:1px solid #c9a464;border-radius:8px;background:#fffdf7;color:#49351f;font:inherit;resize:vertical} .guild-warn{color:#a3361d;font-size:12.5px} .guild-head{border:1px solid #d6b575;background:linear-gradient(#fffaf0,#f6e6c3);border-radius:10px;padding:10px 12px;display:grid;gap:5px} .guild-name{display:flex;align-items:baseline;gap:10px}.guild-name strong{font-size:19px;color:#5a3a12}.guild-level{font-size:12px;padding:2px 9px;border-radius:999px;background:#8a5a22;color:#fff7e6} .guild-bar{height:8px;border-radius:999px;background:#e4d1a8;overflow:hidden}.guild-bar i{display:block;height:100%;background:linear-gradient(90deg,#1f9e76,#5fe0b0)} .guild-head small{font-size:12px}.guild-perk{color:#1d6b52;font-weight:700} .guild-notice{margin-top:8px}.guild-notice button{margin-top:6px;min-height:32px;padding:0 14px}.guild-notice-text{white-space:pre-wrap;border-left:3px solid #c9a464;padding:4px 10px;margin:0;background:#fffaf0;border-radius:0 8px 8px 0} .guild-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px} .guild-members{display:grid;gap:6px;margin-top:6px}.guild-members h3{margin-bottom:2px} .guild-member{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid #d6b575;background:#fffaf0;border-radius:9px;padding:6px 10px} .guild-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}.guild-who strong{font-size:13.5px}.guild-who small{font-size:12px;opacity:.75;flex-basis:100%;padding-left:16px} .guild-dot{width:8px;height:8px;border-radius:50%;background:#b9a98a;flex:0 0 auto}.guild-member.online .guild-dot{background:#2fbf71;box-shadow:0 0 6px #2fbf71} .guild-who em{font-style:normal;font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid #c9a464;color:#6b4e23}.guild-who em.rank-leader{background:#8a5a22;color:#fff7e6;border-color:#8a5a22}.guild-who em.rank-officer{background:#1f9e76;color:#fff;border-color:#1f9e76} .guild-actions{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}.guild-actions button,.guild-row button{min-height:28px;padding:0 10px;font-size:12px;white-space:nowrap} .guild-window button.danger,.mail-window button.danger{background:#fff0ea;border-color:#d88a6e;color:#9a2f14} .guild-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0;font-size:13px}.guild-row span{flex:1 1 auto} .guild-perks ol{margin:4px 0;padding-left:20px;font-size:12.5px;display:grid;gap:2px} .guild-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;border-top:1px dashed #d6b575;padding-top:8px}.guild-foot small{flex:1 1 100%}.guild-foot button{min-height:32px;padding:0 14px} .mentor-page p{margin:3px 0} .mail-page{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}.mail-page[hidden]{display:none} .mail-list{display:grid;gap:5px;align-content:start;max-height:min(56vh,480px);overflow:auto;padding-right:2px} .mail-item{display:grid;gap:2px;text-align:left;border:1px solid #d6b575;background:#fffaf0;border-radius:9px;padding:7px 10px;color:#49351f;min-height:0;width:100%} .mail-item strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item small{font-size:11.5px;opacity:.75}.mail-item.unread{border-color:#c98a1a;background:#fff4d6}.mail-item.unread strong::before{content:"● ";color:#d2482f} .mail-item.active{outline:2px solid #8a5a22;outline-offset:-2px}.mail-clip{font-style:normal;font-size:11.5px;color:#1d6b52;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-read{border:1px solid #d6b575;background:#fffdf7;border-radius:10px;padding:10px 12px;min-height:180px;display:grid;align-content:start;gap:6px}.mail-read h3{margin:0}.mail-read>button{justify-self:start;min-height:32px;padding:0 14px} .mail-meta{font-size:11.5px;opacity:.7;margin:0}.mail-body{white-space:pre-wrap;margin:4px 0;font-size:13.5px} .mail-attached{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px dashed #c9a464;border-radius:9px;padding:8px;background:#fffaf0}.mail-attached h4{flex-basis:100%}.mail-attached>button{min-height:32px;padding:0 14px}.mail-attached .guild-field{flex-basis:100%} .mail-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid #d6b575;border-radius:8px;padding:3px 7px;background:#fff;font-size:12px}.mail-chip img{width:26px;height:26px}.mail-gold{color:#8a5a22;font-weight:700} .mail-x{min-height:22px!important;width:22px;padding:0!important;border-radius:50%!important;font-size:12px;line-height:1} .mail-write{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.mail-compose{display:grid;gap:6px;align-content:start}.mail-compose>button{justify-self:start;min-height:36px;padding:0 18px} .mail-bag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;align-content:start;max-height:min(56vh,480px);overflow:auto}.mail-bag h4{grid-column:1/-1} .mail-pick{display:flex;align-items:center;gap:6px;text-align:left;border:1px solid #d6b575;background:#fffaf0;border-radius:8px;padding:4px 6px;font-size:11.5px;color:#49351f;min-height:0}.mail-pick img{width:28px;height:28px;flex:0 0 auto}.mail-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-pick.no{opacity:.45} @media(max-width:640px){.mail-page,.mail-write,.guild-tools{grid-template-columns:1fr}.mail-list,.mail-bag{max-height:34vh}} .guild-window .guild-inline>input{flex:1 1 0!important;width:auto!important;min-width:90px}.guild-window .guild-inline>button{flex:0 0 auto!important;width:auto!important;min-width:84px} .guild-window .guild-actions>button,.guild-window .guild-row>button,.guild-window .guild-foot>button,.guild-window .guild-notice>button{flex:0 0 auto!important;width:auto!important} .mail-window .mail-compose>button,.mail-window .mail-read>button,.mail-window .mail-attached>button{width:auto!important} /* 0.1.254 Market: guild emblem and shop, stalls (แผงลอย), auction house (โรงประมูล), labels above players */ .side-menu #stall-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/stall-open.svg?v=0.1.254) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)} #hud .side-menu #side-menu-items #stall-open::after{content:"แผงลอย"} .guild-emblem{display:inline-block;vertical-align:middle;flex:0 0 auto;filter:drop-shadow(0 1px 1px #0005)}.guild-name .guild-emblem.big{align-self:center} .emblem-picker{border:1px solid #d6b575;background:#fffaf0;border-radius:10px;padding:8px 12px;margin-top:8px}.emblem-picker h3{margin-top:2px} .emblem-top{display:flex;align-items:center;gap:10px}.emblem-top>div{display:grid;flex:1 1 auto;min-width:0}.emblem-top small{font-size:12px;opacity:.75} .guild-window .emblem-top>button{width:auto!important;flex:0 0 auto!important;min-height:32px;padding:0 14px} .emblem-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin:8px 0 6px} .guild-window .emblem-cell{width:auto!important;min-height:0!important;padding:3px!important;border:1px solid #d6b575;border-radius:8px;background:#fff;display:grid;place-items:center} .guild-window .emblem-cell.on{outline:2px solid #8a5a22;outline-offset:-1px;background:#fff4d6} .emblem-colors{display:flex;gap:6px;flex-wrap:wrap}.guild-window .emblem-swatch{width:26px!important;height:26px;min-height:0!important;padding:0!important;border-radius:50%!important;border:2px solid #fff;box-shadow:0 0 0 1px #8a6a3a} .guild-window .emblem-swatch.on{box-shadow:0 0 0 2px #2a1a08,0 0 6px #d1a237} .gshop-list{display:grid;gap:6px;margin-top:8px} .gshop-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto 62px auto;align-items:center;gap:8px;border:1px solid #d6b575;background:#fffaf0;border-radius:9px;padding:5px 9px} .gshop-row img{width:32px;height:32px}.gshop-row.locked{opacity:.55}.gshop-info{display:grid;min-width:0}.gshop-info strong{font-size:13px}.gshop-info small{font-size:11.5px;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gshop-cost{font-weight:700;color:#8a5a22;font-size:13px;white-space:nowrap} .guild-window .gshop-row input{width:62px!important;min-height:30px;padding:2px 6px;border:1px solid #c9a464;border-radius:7px;background:#fffdf7;color:#49351f} .guild-window .gshop-row>button{width:auto!important;min-height:30px;padding:0 12px} .stall-window,.auction-window{width:min(780px,calc(100vw - 20px))}.stall-window .menu-body,.auction-window .menu-body{display:block} #stall-view-dialog{width:min(560px,calc(100vw - 20px))} .stall-status:empty,.auction-status:empty{min-height:0;margin:0} .stall-window h4,.auction-window h4{margin:0 0 6px;font-size:13px;color:#6b4e23}.stall-window .muted,.auction-window .muted{font-size:12.5px;opacity:.78;margin:4px 0} .stall-page{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:12px}#stall-view-dialog .stall-page{display:block} .stall-page:has(>.guild-head){grid-template-columns:1fr} .stall-setup{display:grid;gap:6px;align-content:start}.stall-window .stall-setup>button{justify-self:start;width:auto!important;min-height:36px;padding:0 18px} .stall-list{display:grid;gap:5px;align-content:start} .stall-row{display:flex;align-items:center;gap:8px;border:1px solid #d6b575;background:#fffaf0;border-radius:9px;padding:5px 8px} .stall-item{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;font-size:12.5px}.stall-item img{width:30px;height:30px;flex:0 0 auto}.stall-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stall-count{font-size:12px;opacity:.8;white-space:nowrap}.stall-price{font-weight:700;color:#8a5a22;font-size:13px;white-space:nowrap} .stall-window .stall-row input,.auction-window .stall-qty{width:74px!important;flex:0 0 auto;min-height:30px;padding:2px 6px;border:1px solid #c9a464;border-radius:7px;background:#fffdf7;color:#49351f} .stall-window .stall-row input.stall-price-in{width:96px!important} .stall-window .stall-row>button{width:auto!important;flex:0 0 auto!important;min-height:30px;padding:0 12px}.stall-window .stall-row>button.mail-x{width:22px!important;padding:0!important} .stall-sign{font-size:17px;color:#8a2a14}.stall-window .guild-foot>button{width:auto!important;flex:0 0 auto!important} .stall-window .mail-bag,.auction-window .mail-bag{max-height:min(52vh,440px)} .mail-pick.on{outline:2px solid #8a5a22;outline-offset:-2px;background:#fff4d6} .auction-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px} .auction-window .auction-filter input,.auction-window .auction-filter select,.auction-window .auction-sell select{min-height:34px;padding:3px 8px;border:1px solid #c9a464;border-radius:8px;background:#fffdf7;color:#49351f;font:inherit;font-size:13px} .auction-window .auction-filter input:first-child{flex:1 1 140px;width:auto!important;min-width:120px}.auction-window .auction-filter .auction-lv{width:86px!important;flex:0 0 auto} .auction-window .auction-filter select{width:auto!important;flex:0 0 auto}.auction-window .auction-filter button{width:auto!important;flex:0 0 auto!important;min-height:34px;padding:0 16px} .auction-list{display:grid;gap:6px;min-height:120px;align-content:start} .auction-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:8px;border:1px solid #d6b575;background:#fffaf0;border-radius:9px;padding:6px 9px} .auction-row.mine{background:#f3f7ee;border-color:#9fc08a}.auction-row.top{background:#fff4d6;border-color:#c98a1a}.auction-row img{width:34px;height:34px} .auction-info{display:grid;min-width:0}.auction-info strong{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auction-info small{font-size:11.5px;opacity:.75} .auction-price{display:grid;justify-items:end;line-height:1.25}.auction-price b{color:#8a5a22;font-size:14px;white-space:nowrap}.auction-price small{font-size:11px;opacity:.75;white-space:nowrap}.auction-price .auction-now{opacity:1;color:#1d6b52;font-weight:700} .auction-act{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;align-items:center;max-width:250px} .auction-window .auction-act input{width:92px!important;min-height:30px;padding:2px 6px;border:1px solid #c9a464;border-radius:7px;background:#fffdf7;color:#49351f} .auction-window .auction-act button{width:auto!important;flex:0 0 auto!important;min-height:30px;padding:0 11px;font-size:12.5px;white-space:nowrap} .auction-window button.danger{background:#fff0ea;border-color:#d88a6e;color:#9a2f14} .auction-tag{font-size:11.5px;padding:2px 9px;border-radius:999px;background:#9fc08a;color:#183a10;white-space:nowrap}.auction-tag.top{background:#c98a1a;color:#fff7e6} .auction-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 2px;font-size:12.5px}.auction-window .auction-pager button{width:auto!important;min-height:30px;padding:0 12px} .auction-sell{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px}.auction-window .auction-sell .mail-compose>button{width:auto!important;justify-self:start;min-height:36px;padding:0 18px} .auction-window .guild-field input{width:100%;box-sizing:border-box;min-height:34px;padding:5px 8px;border:1px solid #c9a464;border-radius:8px;background:#fffdf7;color:#49351f;font:inherit}.auction-window .guild-field select{width:100%} @media(max-width:640px){.stall-page,.auction-sell{grid-template-columns:1fr}.auction-row{grid-template-columns:30px minmax(0,1fr) auto}.auction-act{grid-column:1/-1;max-width:none}.emblem-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.gshop-row{grid-template-columns:30px minmax(0,1fr) auto;}.gshop-row input,.gshop-row>button{grid-row:2}} #labels .label.rich{display:grid;justify-items:center;line-height:1.15}#labels .label.rich[data-faction]::before{content:none} #labels .label.rich[data-faction=dawn] .pl-name::before{content:'☀ ';color:#ffcf5a}#labels .label.rich[data-faction=dusk] .pl-name::before{content:'☾ ';color:#b48cff} #labels .pl-guild{display:flex;align-items:center;gap:3px;font-size:11px;color:#bdf5d6;font-weight:700} #labels .pl-stall{font-size:11.5px;font-weight:700;color:#5a2a08;background:linear-gradient(#fff2c4,#f3c86a);border:1px solid #8a5a22;border-radius:6px;padding:1px 8px;margin-bottom:2px;text-shadow:none;box-shadow:0 2px 4px #0006;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis} /* 0.1.255 PvP (ศึกยุทธภพ): mode switch, fight tag, player target, duel prompt/banner, war panel, PvP window, honour counter, name colours */ .pvp-hud{position:fixed;left:8px;top:148px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:300px;pointer-events:none} .pvp-hud>*{pointer-events:auto} .pvp-mode{display:flex;align-items:center;gap:6px;min-height:30px;padding:2px 12px 2px 8px;border-radius:15px;border:1px solid #d9c08c88;background:#12303ae6;color:#eaf5ed;font-size:12px;box-shadow:0 3px 10px #0006} .pvp-mode span{font-size:16px;line-height:1}.pvp-mode small{font-size:12px} .pvp-mode[data-mode=faction]{border-color:#f0b35a;background:#3a2a12e6;color:#ffe3a8}.pvp-mode[data-mode=free]{border-color:#ff6b5a;background:#4a1717e6;color:#ffd2c8} .pvp-tag{font-size:11px;padding:3px 9px;border-radius:12px;background:#6b1d1de6;color:#ffe2da;border:1px solid #ff8a7a88} .pvp-mode-menu{position:absolute;left:0;top:36px;width:280px;display:grid;gap:4px;padding:6px;border-radius:10px;background:#fff3d6;border:1px solid #c9a464;box-shadow:0 10px 30px #0008} .pvp-mode-item{display:grid;gap:2px;text-align:left;padding:7px 10px;border-radius:8px;border:1px solid #d6b575;background:#fffaf0;color:#49351f} .pvp-mode-item b{font-size:13px}.pvp-mode-item small{font-size:11px;line-height:1.4;opacity:.85}.pvp-mode-item[aria-pressed=true]{background:#8a5a22;color:#fff7e6;border-color:#8a5a22} .pvp-target{flex-basis:100%;display:grid;gap:3px;padding:7px 10px;border-radius:8px;background:#12303ae6;border:1px solid #ff8a7a66;color:#eaf5ed;font-size:12px;max-width:240px} .pvp-target b{font-size:13px}.pvp-target small{font-size:11px;opacity:.85}.pvp-target-hp{display:block;height:7px;border-radius:4px;background:#071c26;overflow:hidden}.pvp-target-hp span{display:block;height:100%;background:linear-gradient(90deg,#a25361,#e19a91)} .pvp-target b.dawn{color:#ffe29a}.pvp-target b.dusk{color:#d9c2ff} .karma-1{color:#f0a35a!important}.karma-2{color:#ff5a4a!important}.karma-3{color:#c03cff!important} .pvp-duel-prompt{position:fixed;left:50%;bottom:190px;transform:translateX(-50%);z-index:30;width:min(340px,calc(100vw - 24px));display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-radius:12px;background:#fff3d6;color:#49351f;border:1px solid #c9a464;box-shadow:0 12px 34px #000a} .pvp-duel-prompt strong,.pvp-duel-prompt small{grid-column:1/-1}.pvp-duel-prompt small{font-size:12px;opacity:.85}.pvp-duel-prompt button{min-height:36px;border-radius:8px;border:1px solid #c9a464;background:#fffaf0;color:#49351f;justify-content:center} .pvp-duel-banner{position:fixed;left:50%;top:196px;transform:translateX(-50%);z-index:7;padding:8px 18px;border-radius:18px;background:#4a1717e6;color:#ffe9c9;border:1px solid #f0b35a99;font-size:14px;pointer-events:none;text-shadow:0 1px 3px #000;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis} .pvp-duel-banner[data-phase=count]{font-size:18px;background:#3a2a12e6}.pvp-duel-banner[data-phase=end]{background:#12303ae6} .pvp-war-panel{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:6;width:min(320px,calc(100vw - 340px));min-width:240px;padding:8px 12px;border-radius:10px;background:#12303aeb;border:1px solid #d9c08c66;color:#eaf5ed;font-size:12px;pointer-events:none;box-shadow:0 6px 20px #0006} .pvp-war-panel h3,.pvp-war-block h3{margin:0 0 5px;font-size:13px;color:#edd1a0;font-weight:600}.pvp-war-panel p{margin:2px 0;font-size:13px} .pvp-score{display:flex;height:9px;border-radius:5px;overflow:hidden;background:#071c26}.pvp-score i{display:block;height:100%;min-width:2px}.pvp-score i.dawn{background:linear-gradient(90deg,#e0a63a,#ffd77a)}.pvp-score i.dusk{background:linear-gradient(90deg,#8d6bff,#5a3ab8)} .pvp-score-nums{display:flex;justify-content:space-between;margin:3px 0;font-size:12px}.pvp-score-nums .dawn{color:#ffd77a}.pvp-score-nums .dusk{color:#cdb6ff} .pvp-war-block small{display:block;font-size:11px;opacity:.9;margin-top:2px}.pvp-top{margin:4px 0 0;padding-left:18px;font-size:11px;columns:2;column-gap:10px}.pvp-top li.dawn{color:#ffd77a}.pvp-top li.dusk{color:#cdb6ff} .pvp-window{width:min(640px,calc(100vw - 20px))}.pvp-tabs{display:flex;gap:8px;margin-bottom:10px}.pvp-tabs button{min-height:36px;padding:0 14px;border:1px solid #c9a464;border-radius:8px;background:#fffaf0;color:#49351f}.pvp-tabs button.active,.pvp-tabs button.active:hover,.pvp-tabs button.active:focus{background:#8a5a22!important;color:#fff7e6!important;border-color:#8a5a22} .pvp-sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}.pvp-rank{font-size:18px;color:#8a5a22}.pvp-sheet-head small{font-size:12px;opacity:.8} .pvp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.pvp-stat{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid #d6b575;background:#fffaf0;border-radius:8px;font-size:13px}.pvp-stat b{white-space:nowrap} .pvp-modes{display:flex;gap:6px;margin:10px 0 4px}.pvp-modes button{flex:1;min-height:36px;border-radius:8px;border:1px solid #c9a464;background:#fffaf0;color:#49351f;justify-content:center}.pvp-modes button.primary{background:#8a5a22;color:#fff7e6} .pvp-note{font-size:12px!important;opacity:.85;margin:6px 0}.pvp-window .pvp-war-block{margin-top:10px;padding:10px;border-radius:9px;background:#12303a;color:#eaf5ed} .pvp-gwar-list{display:grid;gap:6px;margin-bottom:10px}.pvp-gwar{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:7px 10px;border:1px solid #d6b575;background:#fffaf0;border-radius:8px}.pvp-gwar small{display:block;font-size:12px;opacity:.8}.pvp-gwar.active{border-color:#c0392b}.pvp-gwar-score{font-size:16px} .pvp-gwar button{min-height:32px;width:auto!important;padding:0 12px}.pvp-gwar-form{display:flex;gap:6px}.pvp-gwar-form input{flex:1;margin:0;min-height:36px;background:#fffaf0;color:#49351f;border-color:#c9a464}.pvp-gwar-form button{width:auto!important;white-space:nowrap} .pvp-rules{margin:0;padding-left:20px;font-size:13px;line-height:1.65}.pvp-rules li{margin-bottom:4px} .pvp-shop-buy{grid-column:1/-1;display:flex;gap:6px}.pvp-shop-buy button{flex:1;min-height:34px;justify-content:center}.pvp-shop .store-items button:not(.primary){border:1px solid #c9a464;border-radius:4px;background:#fffaf0;color:#49351f} .pvp-sheet{display:grid;gap:2px;margin-top:8px;padding:8px 10px;border-radius:8px;border:1px solid #d6b57588;font-size:12px}.pvp-sheet b{font-size:13px} #labels .label[data-pk]:not([data-pk=""])::after{content:' ⚔';color:#ff8a6a} body[data-pvp-faction=dawn] #labels .label[data-faction=dusk][data-pk]:not([data-pk=""]),body[data-pvp-faction=dusk] #labels .label[data-faction=dawn][data-pk]:not([data-pk=""]){color:#ff9c86;text-shadow:0 0 6px rgba(255,60,40,.6),0 1px 2px #2a0606} #labels .label[data-karma="1"]{color:#f0a35a;text-shadow:0 0 6px rgba(240,140,60,.55),0 1px 2px #000}#labels .label[data-karma="2"]{color:#ff5a4a;text-shadow:0 0 7px rgba(255,40,30,.6),0 1px 2px #000}#labels .label[data-karma="3"]{color:#d070ff;text-shadow:0 0 8px rgba(190,60,255,.75),0 1px 2px #000} @media(max-width:750px){.pvp-hud{top:auto;bottom:250px;left:8px}.pvp-war-panel{width:calc(100vw - 24px);top:auto;bottom:300px}.pvp-grid{grid-template-columns:1fr}} /* 0.1.256 Pets: side menu entry, the pet window and the character-sheet line */ .side-menu #pet-open::before{content:"";display:block;width:30px;height:30px;background:url(/assets/menu/pet-open.svg?v=0.1.256) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0008)}.side-menu #pet-open>span{display:none} #hud .side-menu #side-menu-items #pet-open::after{content:"สัตว์เลี้ยง"}#hud .side-menu #side-menu-items #pet-open.has-pet{box-shadow:0 0 0 2px #7fe0b8,0 0 10px #7fe0b888} .pet-window{width:min(820px,calc(100vw - 20px))}.pet-window .menu-body{display:block;color:#49351f} .pet-status{min-height:18px;margin:0 0 6px;font-size:13px;color:#6b4e23}.pet-status[data-ok=false]{color:#b0342a} .pet-layout{display:grid;grid-template-columns:minmax(200px,250px) 1fr;gap:12px} .pet-list{display:flex;flex-direction:column;gap:6px} .pet-card{position:relative;display:flex;align-items:center;gap:8px;min-height:70px;padding:6px 8px;border:1px solid #d6b575;border-left:4px solid var(--q,#d6b575);border-radius:9px;background:#fffaf0;color:#49351f;text-align:left;font:inherit;cursor:pointer} .pet-card.active{background:#fff1d2;box-shadow:0 0 0 2px #c9a464}.pet-card.out{border-color:#4fa889}.pet-card.slot{justify-content:center;color:#9a8460;border-style:dashed;cursor:default;font-size:12px} .pet-card-info{display:grid;gap:2px;min-width:0;flex:1}.pet-card-info strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pet-card-info small{font-size:11.5px;opacity:.8} .pet-tag{position:absolute;right:6px;top:5px;font-size:10.5px;padding:1px 6px;border-radius:9px;background:#3a8f7a;color:#fff} .pet-pic{flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ffffff,#e9dcc0)}.pet-pic.small{width:54px;height:54px}.pet-pic.big{width:120px;height:120px} .pet-pic img{width:100%;height:100%;object-fit:contain}.pet-pic img.pending{width:60%;height:60%;opacity:.55} .pet-detail{min-height:260px;padding:10px 12px;border:1px solid #d6b575;border-radius:10px;background:#fffdf7} .pet-head{display:flex;gap:12px;align-items:center}.pet-head-text h3{margin:0;font-size:20px;text-shadow:0 1px 0 #0004}.pet-head-text small{font-size:12px;opacity:.8}.pet-info{margin:4px 0 0;font-size:12.5px} .pet-rows{display:grid;gap:3px;margin:10px 0}.pet-row{display:flex;justify-content:space-between;gap:10px;font-size:13px}.pet-row b{text-align:right}.pet-row.bonus b{color:#2f7a5f} .pet-sub{font-size:11.5px;opacity:.75} .pet-bar{height:7px;border-radius:5px;background:#e8dcc4;overflow:hidden}.pet-bar i{display:block;height:100%;background:linear-gradient(90deg,#8fd6b8,#3a8f7a)}.pet-bar.exp i{background:linear-gradient(90deg,#ffe08a,#d39a2a)} .pet-actions{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.pet-actions button,.pet-egg-row button,.pet-rename button,.pet-detail>.danger{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:2px 12px;border:1px solid #c9a464;border-radius:8px;background:#fffaf0;color:#49351f;font:inherit;font-size:13px;cursor:pointer} .pet-window button.primary{background:#8a5a22;border-color:#8a5a22;color:#fff7e6}.pet-window button.danger{border-color:#c0574a;color:#a3332a}.pet-window button:disabled{opacity:.5;cursor:default} .pet-actions .item-art,.pet-egg-row .item-art{width:22px;height:22px} .pet-rename{display:flex;gap:6px;margin:8px 0}.pet-rename input{flex:1;min-width:0;min-height:34px;padding:3px 8px;border:1px solid #c9a464;border-radius:8px;background:#fffdf7;color:#49351f;font:inherit;font-size:13px} .pet-eggs{margin-top:10px;padding-top:8px;border-top:1px dashed #d6b575}.pet-eggs h4{margin:0 0 6px;font-size:13px;color:#6b4e23}.pet-egg-row{display:flex;flex-wrap:wrap;gap:6px} .pet-empty{font-size:13px;opacity:.8} .pet-sheet{display:grid;gap:2px;margin-top:8px;padding:8px 10px;border-radius:8px;border:1px solid #7fcfb788;font-size:12px}.pet-sheet b{font-size:13px} @media(max-width:640px){.pet-layout{grid-template-columns:1fr}.pet-list{flex-direction:row;overflow-x:auto}.pet-card{min-width:180px}.pet-pic.big{width:84px;height:84px}} /* 0.1.257 Phase 9: events window (check-in calendar, star wheel, rankings, titles, world boss, star ground), reborn and rename, HUD boards, name marks */ .rb-window{width:min(760px,calc(100vw - 20px))}.rb-reborn,.rb-rename{width:min(560px,calc(100vw - 20px))} .rb-tabs,.rb-boards{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.rb-tabs button,.rb-boards button{min-height:34px;padding:0 12px;border:1px solid #c9a464;border-radius:8px;background:#fffaf0;color:#49351f;font-size:13px} .rb-tabs button.active,.rb-boards button.active{background:#8a5a22!important;color:#fff7e6!important;border-color:#8a5a22} .rb-boards button{min-height:30px;font-size:12px} .rb-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;color:#49351f}.rb-head span{font-size:13px} .rb-calendar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px} .rb-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:86px;padding:5px 4px;border:1px solid #d6b575;border-radius:9px;background:#fffaf0;color:#49351f;text-align:center} .rb-day small{font-size:11px;opacity:.8}.rb-day .rb-day-text{font-size:10.5px;line-height:1.25;max-height:2.6em;overflow:hidden} .rb-day.done{background:#efe3c6;opacity:.75}.rb-day.next{border:2px solid #8a5a22;background:#fff3cf;box-shadow:0 0 0 3px #f2c76a55} .rb-check{position:absolute;top:3px;right:6px;font-style:normal;font-weight:700;color:#2e7d4f;font-size:16px} .rb-reward-icon{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center}.rb-reward-icon img{width:34px;height:34px;object-fit:contain}.rb-coin{font-size:24px;color:#c9902b} .rb-actions{display:flex;justify-content:center;margin:10px 0 4px} .rb-primary{min-height:40px;padding:0 18px;border:1px solid #8a5a22;border-radius:10px;background:linear-gradient(#b67a33,#8a5a22);color:#fff7e6;font-weight:600}.rb-primary:disabled{opacity:.55;filter:grayscale(.4)} .rb-note{font-size:12px!important;opacity:.85;margin:6px 0;color:#49351f}.rb-have{font-size:13px;margin:6px 0;color:#49351f}.rb-lede{font-style:italic;color:#6b4a22;margin:0 0 6px}.rb-done{font-weight:600;color:#2e7d4f} .rb-spin{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:14px;align-items:start}.rb-spin-left{display:flex;flex-direction:column;align-items:center;gap:6px} .rb-wheel{position:relative;width:270px;height:270px;max-width:72vw;max-height:72vw} .rb-disc{position:absolute;inset:0;border-radius:50%;border:6px solid #8a5a22;box-shadow:0 4px 14px #0005,inset 0 0 0 2px #fff6;transform:rotate(0deg);overflow:hidden} .rb-seg{position:absolute;left:50%;top:0;width:0;height:50%;transform-origin:0 100%}.rb-seg-in{position:absolute;top:10px;left:-17px;width:34px;display:flex;justify-content:center} .rb-pin{position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:26px solid #b8321f;filter:drop-shadow(0 2px 2px #0006);z-index:2} .rb-hub{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(#fff2b8,#c9902b);border:3px solid #6b4a22;display:flex;align-items:center;justify-content:center;color:#6b2a10;font-size:22px;z-index:2} .rb-spin-right h3,.rb-window h3{margin:4px 0 6px;font-size:14px;color:#6b4a22} .rb-prizes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.rb-prizes li{display:flex;align-items:center;gap:6px;padding:3px 6px;border:1px solid #e2c99a;border-radius:7px;background:#fffaf0;font-size:12px;color:#49351f} .rb-prizes .rb-reward-icon,.rb-prizes .rb-reward-icon img{width:26px;height:26px}.rb-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;border:1px solid #0003} .rb-table{width:100%;border-collapse:collapse;font-size:13px;color:#49351f;margin:4px 0}.rb-table th{background:#f1dfb5;text-align:left;padding:6px 8px;font-weight:600}.rb-table td{padding:5px 8px;border-bottom:1px solid #ead7ad}.rb-table tr.me td{background:#fff0c4;font-weight:600}.rb-r{width:52px} .rb-titles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.rb-title{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;border:1px solid #e2c99a;border-radius:9px;background:#f7f1e3;color:#8a7a62} .rb-title div{display:flex;flex-direction:column;gap:2px;min-width:0}.rb-title small{font-size:11px}.rb-title.has{background:#fffaf0;color:#49351f;border-color:#d6b575}.rb-title.active{border:2px solid #8a5a22;background:#fff3cf} .rb-title button{flex:none;min-height:30px;padding:0 10px;border:1px solid #c9a464;border-radius:7px;background:#fffaf0;color:#49351f;font-size:12px}.rb-title button:disabled{opacity:.5} .rb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0}.rb-stat{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid #d6b575;background:#fffaf0;border-radius:8px;font-size:13px;color:#49351f}.rb-stat b{text-align:right}.rb-stat span{white-space:nowrap} .rb-top{margin:4px 0;padding-left:22px;font-size:13px;color:#49351f} .rb-field{display:flex;flex-direction:column;gap:4px;margin:8px 0;color:#49351f}.rb-field input{min-height:38px;padding:0 10px;border:1px solid #c9a464;border-radius:8px;font-size:15px} .rb-boss-hud{position:fixed;right:12px;top:276px;z-index:6;width:230px;padding:8px 11px;border-radius:10px;background:#2a1530eb;border:1px solid #e0a8ff66;color:#f6eafc;font-size:12px;pointer-events:none;box-shadow:0 6px 20px #0006} .rb-boss-hud h3{margin:0 0 5px;font-size:13px;color:#ffd38a}.rb-boss-hud .rb-top{color:#f6eafc;font-size:12px;margin:5px 0 2px;padding-left:18px}.rb-me{margin:2px 0 0;color:#ffd38a} .rb-hp{position:relative;height:14px;border-radius:7px;background:#0007;overflow:hidden}.rb-hp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#b8321f,#ff7a4d)}.rb-hp span{position:relative;display:block;text-align:center;font-size:10px;line-height:14px} .rb-dungeon-hud{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:10px;background:#132a44eb;border:1px solid #9fc7ff66;color:#eaf3ff;font-size:13px;box-shadow:0 6px 20px #0006} .rb-dungeon-hud b{color:#ffd38a}.rb-dungeon-hud button{min-height:28px;padding:0 10px;border-radius:7px;border:1px solid #9fc7ff88;background:#1f4166;color:#eaf3ff} .label .pl-title{font-size:.82em;color:#ffd77a;text-shadow:0 1px 2px #000c;font-weight:600}.label .pl-reborn{color:#ffe38a;margin-right:3px;text-shadow:0 0 6px #ffcf4d} @media(max-width:750px){.rb-calendar{grid-template-columns:repeat(5,minmax(0,1fr))}.rb-spin{grid-template-columns:1fr}.rb-prizes,.rb-titles,.rb-grid{grid-template-columns:1fr}.rb-boss-hud{top:auto;bottom:300px;right:8px;width:200px}.rb-dungeon-hud{top:auto;bottom:250px}} /* 0.1.259 QoL & moderation: bag sort, item cooldown sweep, block list, report dialog, inspection extras, ranking titles */ .bag-sort{margin-left:auto;padding:3px 10px;border-radius:999px;border:1px solid #c8a96388;background:#f6e7bf;color:#5b3f1d;font:600 12px/1.4 inherit;cursor:pointer}.bag-sort:hover{background:#ffefc6} .inventory-slot .slot-cool{position:absolute;inset:0;border-radius:inherit;background:#06141acc;pointer-events:none;transform-origin:bottom;animation:slot-cool linear forwards} @keyframes slot-cool{from{transform:scaleY(1)}to{transform:scaleY(0)}} .ignore-add{display:flex;gap:6px;margin:2px 0 6px}.ignore-add input{flex:1;min-width:0;padding:5px 8px;border-radius:8px;border:1px solid #c9b98b;background:#fffaf0;color:#3b2c18}.ignore-add button{padding:5px 10px;border-radius:8px;border:1px solid #b9825c;background:#f3d4c2;color:#5a2a14;cursor:pointer} #report-dialog{width:min(440px,94vw);padding:0;border:1px solid #ddcf9e;border-radius:20px;background:linear-gradient(#fbf4e2,#f1e2bd);color:#46331c;box-shadow:0 24px 80px #061e3670;color-scheme:light} #report-dialog::backdrop{background:#08252c88;backdrop-filter:blur(4px)} #report-dialog .menu-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 6px}#report-dialog .menu-close{border:0;background:none;font-size:22px;cursor:pointer;color:#6b4b25} .report-form{display:flex;flex-direction:column;gap:10px;padding:6px 18px 18px}.report-who{margin:0;font-weight:600} .report-reasons{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:1px solid #d9c48f;border-radius:12px;padding:8px 10px;margin:0}.report-reasons legend{padding:0 4px;font-size:12px;color:#7a5d33} .report-reason{display:flex;gap:6px;align-items:center;font-size:13px}.report-form textarea{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid #c9b98b;background:#fffdf6;padding:8px;font:inherit;resize:vertical} .report-form label{display:flex;flex-direction:column;gap:4px;font-size:13px}.report-note{margin:0;font-size:12px;color:#7a6440}.report-status{margin:0;min-height:1.2em;font-size:13px;color:#8a3b1c} .report-actions{display:flex;justify-content:space-between;gap:8px}.report-actions button{padding:7px 14px;border-radius:10px;border:1px solid #b08a4c;background:#f6e3b4;color:#4a3416;font-weight:600;cursor:pointer}.report-actions [data-send]{background:#a5452a;border-color:#7d2f1a;color:#fff6ea} .inspect-more{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.inspect-more>div{padding:7px 10px;background:#f3ecd380;border-radius:10px;min-width:0}.inspect-more dt{font-size:11px;opacity:.75}.inspect-more dd{margin:0;font-weight:600;display:flex;gap:4px;align-items:center;overflow-wrap:anywhere} .rb-rank-title{display:block;font-size:11px;color:#8a5b14;font-weight:500} #report-dialog .report-form .report-reason{flex-direction:row;align-items:center;gap:8px;padding:4px 6px;border-radius:8px}#report-dialog .report-reason input{width:16px;height:16px;margin:0;flex:none;accent-color:#a5452a} /* 0.1.261 Item Shop */ .ishop-top{display:flex;justify-content:flex-end;margin:0 0 10px}.ishop-balance{padding:6px 14px;border-radius:999px;background:linear-gradient(#fff3c4,#f2cf73);border:1px solid #b8791c;color:#5b3a12;font-weight:800} .ishop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .ishop-card{display:grid;justify-items:center;gap:4px;padding:10px;border:1px solid #d9b46a;border-radius:12px;background:#fffaf0;color:#3b2a14;text-align:center} .ishop-art img{width:56px;height:56px}.ishop-name{font-size:14px}.ishop-info{font-size:11px;line-height:1.25;opacity:.75;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}/* 0.1.261 release: no half-cut third line */.ishop-price{font-weight:800;color:#8a4b00} .ishop-confirm{position:sticky;bottom:0;z-index:2;box-shadow:0 -6px 16px rgba(80,50,10,.18);display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;padding:10px;border-radius:12px;background:#fff1cf;border:1px solid #d9b46a;color:#3b2a14}.ishop-confirm input{width:64px} /* 0.1.262: a window with tabs keeps one size on every tab. The tab that fits best sets the height (measured over every tab, capped by the screen); a longer page scrolls inside the window body, so switching tabs never resizes the window. */ html body :is(#character-dialog,#skills-dialog,#item-shop-dialog,#guild-dialog,#mail-dialog,#auction-dialog,#vault-dialog,#pvp-dialog,#rb-events-dialog).menu-window[open]{ display:flex;flex-direction:column;height:min(var(--tab-h,640px),calc(var(--view-height,100dvh) - 24px));max-height:calc(var(--view-height,100dvh) - 24px);overflow:hidden} html body :is(#character-dialog,#skills-dialog,#item-shop-dialog,#guild-dialog,#mail-dialog,#auction-dialog,#vault-dialog,#pvp-dialog,#rb-events-dialog).menu-window>.menu-body{flex:1 1 auto;min-height:0;max-height:none;overflow:auto} html body #character-dialog{--tab-h:740px}html body #skills-dialog{--tab-h:700px}html body #item-shop-dialog{--tab-h:740px}html body #guild-dialog{--tab-h:520px} html body #mail-dialog{--tab-h:610px}html body #auction-dialog{--tab-h:660px}html body #vault-dialog{--tab-h:640px}html body #pvp-dialog{--tab-h:470px}html body #rb-events-dialog{--tab-h:770px} /* 0.1.266: the warehouse laid out like the bag (two grids side by side, fixed size), the horn banner, the jar chip */ html body #vault-dialog.vault-grid-window{width:min(980px,calc(100vw - 16px))} html body #vault-dialog.vault-grid-window .menu-body{display:flex;flex-direction:column;gap:6px;overflow:hidden} .vault-boards{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:8px;flex:1 1 auto;min-height:0} .vault-board{display:flex;flex-direction:column;min-height:0;border:1px solid #cfaa66;border-radius:12px;background:#fbf1da;padding:8px} .vault-board>header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.vault-board>header h3{margin:0;font-size:15px}.vault-board>header small{opacity:.75} .vault-board .vault-sort{margin-left:auto;min-height:28px;padding:0 10px;border:1px solid #c9a464;border-radius:7px;background:#fffaf0;color:#49351f}.vault-board .vault-sort[aria-pressed=true]{background:#8a5a22;color:#fff7e6} .vault-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-content:start;overflow:auto;flex:1 1 auto;min-height:0;height:min(46vh,400px);padding:2px;border-radius:8px} .vault-cells.drop{outline:2px dashed #5e9a73;outline-offset:2px} .vault-cells .inventory-slot{position:relative;aspect-ratio:1;min-width:0;border:1px solid #cfaa66;border-radius:10px;background:linear-gradient(145deg,#fffdf3,#f8e9c5);box-shadow:inset 0 1px #fff,0 2px 0 #d5b480;padding:4px;display:grid;place-items:center;cursor:pointer} .vault-cells .inventory-slot img{width:100%;height:100%;object-fit:contain;pointer-events:none} .vault-cells .inventory-slot.empty{background:#f4e9cd;opacity:.55;box-shadow:inset 0 2px 5px #b9914230;cursor:default} .vault-cells .inventory-slot:hover:not(.empty),.vault-cells .inventory-slot:focus-visible{outline:2px solid #5e9a73;outline-offset:1px} .vault-cells .vault-blocked{opacity:.4;cursor:not-allowed} .vault-cells .slot-qty{position:absolute;right:3px;bottom:2px;font-size:11px;font-weight:700;color:#6c481f;background:#fff5d9f2;padding:0 3px;border-radius:4px;line-height:1.3} .vault-cells .forge-plus{position:absolute;left:3px;top:2px;font-size:11px;font-weight:800;color:#b8741a} .vault-empty{grid-column:1/-1;text-align:center;margin:20px 0} .vault-arrows{display:grid;place-items:center;color:#8a5a22;font-size:20px} .vault-ask{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid #c9a464;border-radius:10px;background:#fffaf0;padding:6px 10px} .vault-ask img{width:34px;height:34px}.vault-ask input{width:90px;min-height:32px;padding:4px}.vault-ask button{min-height:32px;padding:0 12px} .vault-foot{display:grid;grid-template-columns:1fr 1fr;gap:12px}.vault-foot .vault-move{justify-content:flex-start;flex-wrap:wrap} .vault-hint{margin:0;font-size:12px} @media(max-width:720px){.vault-boards{grid-template-columns:1fr}.vault-arrows{display:none}.vault-cells{grid-template-columns:repeat(5,minmax(0,1fr));height:min(30vh,260px)}.vault-foot{grid-template-columns:1fr}} #shout-banner{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:60;max-width:min(760px,92vw);padding:8px 18px;border-radius:12px;background:linear-gradient(90deg,#5a1d06e8,#a8461ae8,#5a1d06e8);color:#fff4d6;font-size:16px;box-shadow:0 6px 20px #0006;pointer-events:none;text-align:center} #shout-banner b{color:#ffd36a}#shout-banner.show{animation:shout-in .4s ease-out} @keyframes shout-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}} .chat-world.chat-loud b{color:#ffb347} button.status-chip{border:0;font:inherit;cursor:pointer} .party-port{min-width:26px} /* 0.1.266 release: fixed cells in the warehouse grids (empty slots keep their size) and plain-width buttons in the count box */ html body #vault-dialog .vault-cells{grid-template-columns:repeat(6,58px);grid-auto-rows:58px;justify-content:center} html body #vault-dialog .vault-cells .inventory-slot{width:58px;height:58px;aspect-ratio:auto;min-height:0;box-sizing:border-box} html body #vault-dialog .vault-ask>*{flex:0 0 auto;width:auto;margin:0}html body #vault-dialog .vault-ask button{min-width:72px} @media(max-width:720px){html body #vault-dialog .vault-cells{grid-template-columns:repeat(5,52px);grid-auto-rows:52px}html body #vault-dialog .vault-cells .inventory-slot{width:52px;height:52px}} /* 0.1.267 Pet Power: rows, gear, the keeper's places */ .pet-power{display:grid;gap:8px;margin:10px 0;padding:8px;border:1px solid rgba(138,90,34,.3);border-radius:8px;background:rgba(255,248,230,.5)} .pet-power h4,.pet-store h4{margin:4px 0;font-size:13px}.pet-opt{font-size:12px;color:#2f6a8a;display:block} .pet-gear-slot{display:grid;gap:3px;padding:4px 0;border-top:1px dashed rgba(138,90,34,.25);font-size:13px}.pet-guard{font-size:12px;display:inline-flex;align-items:center;gap:4px} .pet-store{margin-top:10px}.pet-store .pet-actions{align-items:center} .floater-pet{color:#7dffc4!important;font-size:.9em} /* 0.1.268 rooms (channels): picker on the character screen, badge + menu in the game */ .roster-channels{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 8px} .roster-channels-title{font-size:12px;color:#d9c08c;letter-spacing:.04em} .roster-channels-row{display:flex;gap:6px;flex-wrap:wrap} .channel-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:64px;padding:4px 10px;border-radius:10px;border:1px solid #d9c08c66;background:#12303ae6;color:#eaf5ed;font-size:12px;cursor:pointer;line-height:1.2} .channel-chip small{font-size:10px;opacity:.8} .channel-chip.pk{border-color:#e0605088;background:#3a1716e6} .channel-chip[aria-pressed="true"]{outline:2px solid #f1d28a;outline-offset:1px} .channel-chip:focus-visible{outline:2px solid #fff} .channel-badge{pointer-events:auto;display:flex;align-items:center;gap:5px;min-height:30px;padding:2px 10px;border-radius:15px;border:1px solid #d9c08c88;background:#12303ae6;color:#eaf5ed;font-size:12px;box-shadow:0 3px 10px #0006;cursor:pointer} .channel-badge small{font-size:10px;opacity:.8} .channel-badge.pk{border-color:#e06050;background:#3a1716e6} .channel-menu{position:fixed;left:8px;top:184px;z-index:30;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;border:1px solid #d9c08c88;background:#0d2229f2;box-shadow:0 6px 18px #0008;max-width:calc(100vw - 32px)} .channel-menu-head{margin:0 0 2px;font-size:11px;color:#d9c08c} .channel-menu .channel-chip{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:180px;max-width:100%} .pvp-mode.pvp-room-off{opacity:.75} .pvp-mode-item:disabled,.pvp-modes button:disabled{opacity:.45;cursor:not-allowed} @media(max-width:750px){.channel-menu{top:auto;bottom:290px}} .roster-channels{flex-basis:100%;justify-content:center} .roster-channels-title{color:#6b5530;font-weight:600} .roster-channels .channel-chip{background:#fffaf0;color:#3b2f1c;border-color:#c9a86a} .roster-channels .channel-chip.pk{background:#fbe9e4;color:#7a2418;border-color:#d98c7c} .roster-channels .channel-chip[aria-pressed="true"]{outline-color:#b8892f} /* 0.1.269 faction war: actions, guardians, invitation */ .pvp-war-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.pvp-war-actions button{flex:1 1 auto;min-width:0;padding:5px 8px;font-size:12px;border-radius:7px;border:1px solid #6d5a3a;background:#2a2218;color:#f3e2c0;cursor:pointer}.pvp-war-actions button.primary,.pvp-war-panel>button.primary{background:#9a6a2a;border-color:#d8a85a;color:#fff}.pvp-war-panel>button{margin-top:5px;padding:5px 12px;font-size:12px;border-radius:7px;border:1px solid #d8a85a;cursor:pointer} .pvp-guards{color:#f2c9a0}.pvp-war-invite{bottom:250px}.pvp-war-panel button,.pvp-war-panel .pvp-war-actions{pointer-events:auto} .pvp-board{width:100%;border-collapse:collapse;font-size:12px}.pvp-board th,.pvp-board td{padding:4px 6px;border-bottom:1px solid #d9c08c44;text-align:left}.pvp-board tr.dawn td:nth-child(3){color:#b07a12}.pvp-board tr.dusk td:nth-child(3){color:#6b4fd0}.pvp-war-board .menu-body{max-height:60vh;overflow:auto}.pvp-cmd,.pvp-reg{color:#f6e2b0} /* 0.1.270 Fixes: the bag's parts never shrink below their content (on a landscape phone the worn-slot board was squeezed under the bag grid; with the 48-slot bag pass its top row was clipped) — the window scrolls instead. The bag window is always inside the screen (portrait phones put it at x=-2). */ html body #bag-dialog.menu-window.workshop-window .menu-body>*,html body #bag-dialog.menu-window.workshop-window .bag-layout>*,html body #bag-dialog.menu-window.workshop-window .equipment-pane,html body #bag-dialog.menu-window.workshop-window .equipment-board{flex-shrink:0!important;min-height:min-content!important} html body #bag-dialog.menu-window.workshop-window .equipment-pane{overflow:visible!important} html body #bag-dialog.menu-window.workshop-window[open]{max-width:calc(100vw - 12px)!important;box-sizing:border-box} @media (max-width:520px){html body #bag-dialog.menu-window.workshop-window[open]{left:6px!important;right:auto!important;translate:none!important;margin-left:0!important}} /* 0.1.270: the game's own confirm / prompt window (replaces the browser's confirm()) */ #game-dialog{width:min(380px,calc(100vw - 24px));padding:16px 18px;border-radius:14px;border:1px solid #c9a464;background:#fff6e2;color:#3e2c16;box-shadow:0 10px 40px #0008;z-index:2147483000} #game-dialog::backdrop{background:#0006} #game-dialog .game-dialog-text{margin:0 0 12px;white-space:pre-line;line-height:1.5;font-size:14px} #game-dialog .game-dialog-input{width:100%;box-sizing:border-box;min-height:36px;padding:6px 10px;border-radius:8px;border:1px solid #c9a464;background:#fff;color:#3e2c16;font-size:14px;margin:0 0 6px} #game-dialog .game-dialog-hint{display:block;margin:0 0 8px;color:#7a6343;font-size:12px} #game-dialog .game-dialog-actions{display:flex;justify-content:flex-end;gap:8px} #game-dialog .game-dialog-actions button{min-width:84px;min-height:34px;padding:0 14px;border-radius:8px;cursor:pointer} #game-dialog .game-dialog-actions button.danger{background:#a8322a;color:#fff;border-color:#7a1f19} /* 0.1.270: portrait phones — buff chips wrap in at most two rows and scroll sideways after that */ @media (max-width:520px) and (orientation:portrait){#hud #status-icons{max-height:46px;overflow:hidden;flex-wrap:wrap}#labels .label.npc{font-size:11px;max-width:150px}} /* 0.1.273: the room step after "ออกเดินทาง" (light, like the character screen) */ .channel-step{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(214,226,208,.72);backdrop-filter:blur(3px)} .channel-step-card{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px 22px 18px;border-radius:22px;background:#fffaf0;border:1px solid #d9c08c;box-shadow:0 18px 50px rgba(60,45,20,.28);color:#3b2f1c;text-align:center} .channel-step-card h2{margin:0 0 6px;font-size:24px;color:#4a3a1e} .channel-step-sub{margin:0 0 14px;font-size:13px;line-height:1.5;color:#6b5a3c} .channel-step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px} .channel-chip.big{width:100%;min-height:74px;align-items:center;justify-content:center;padding:10px;border-radius:14px;background:#fffdf7;color:#3b2f1c;border:1px solid #c9a86a;font-size:18px} .channel-chip.big small{font-size:12px;opacity:.85;margin-top:3px} .channel-chip.big.pk{background:#fbe9e4;color:#7a2418;border-color:#d98c7c} .channel-chip.big[aria-pressed="true"]{outline:3px solid #b8892f;outline-offset:1px;background:#fff1cc} .channel-chip.big.pk[aria-pressed="true"]{background:#f8d6cc} .channel-step-status{margin:12px 0 0;font-size:12px;color:#8a7a5c} .channel-step-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap} .channel-step-actions button{min-height:46px;padding:0 20px;border-radius:14px;font-size:16px;cursor:pointer} .channel-step-back{background:#fffaf0;border:1px solid #c9a86a;color:#5a4626} .channel-step-go{flex:1 1 220px;background:linear-gradient(#ffe39a,#f2c55c);border:1px solid #c9973a;color:#4a3410;font-weight:700} .channel-step-go:disabled{opacity:.5;cursor:default} /* 0.1.274: NPC choice list — fixed icon column, left-aligned title, one clamped line, number key; farewell apart */ #npc-talk-dialog{width:min(460px,94vw)} #npc-talk-dialog .npc-talk-options{display:flex;flex-direction:column;gap:8px} #npc-talk-dialog .npc-talk-option{display:grid;grid-template-columns:40px 1fr auto;align-items:center;column-gap:12px;min-height:76px;padding:9px 12px 9px 10px;text-align:left;justify-items:start;border-radius:12px;border:1px solid #d9b46a;background:linear-gradient(#ffe39a,#f5c561);color:#3d2a0f;box-shadow:0 2px 0 #c99a45;cursor:pointer;transition:transform .08s,box-shadow .08s,filter .12s;width:100%} #npc-talk-dialog .npc-talk-option:hover{filter:brightness(1.05)} #npc-talk-dialog .npc-talk-option:focus-visible{outline:2px solid #7a4d12;outline-offset:2px} #npc-talk-dialog .npc-talk-option:active{transform:translateY(1px);box-shadow:0 1px 0 #c99a45} #npc-talk-dialog .npc-opt-icon{width:40px;height:40px;border-radius:10px;background:#fff6df;border:1px solid #e2c27f;display:grid;place-items:center} #npc-talk-dialog .npc-opt-icon svg{width:22px;height:22px;fill:none;stroke:#7a4d12;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #npc-talk-dialog .npc-opt-text{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%} #npc-talk-dialog .npc-opt-text b{font-size:15.5px;line-height:1.3} #npc-talk-dialog .npc-opt-text small{font-size:12.5px;line-height:1.35;font-weight:400;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #npc-talk-dialog .npc-opt-text small:empty{display:none} #npc-talk-dialog .npc-opt-key{font:600 11px/1 system-ui,sans-serif;min-width:20px;padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.55);border:1px solid #d4ad62;color:#6b4a1c;text-align:center} #npc-talk-dialog .npc-talk-bye{margin-top:6px;min-height:44px;border:1px solid #cfaa66;background:#fffaf0;color:#6b4a1c;border-radius:12px;text-align:center;font-weight:600;width:100%} #npc-talk-dialog .npc-talk-bye:hover{background:#fff3dc} @media (max-width:520px),(max-height:480px){#npc-talk-dialog{width:min(460px,96vw)}#npc-talk-dialog .npc-talk-option{min-height:58px;grid-template-columns:34px 1fr auto;column-gap:10px;padding:7px 10px}#npc-talk-dialog .npc-opt-icon{width:34px;height:34px}#npc-talk-dialog .npc-opt-text small{-webkit-line-clamp:1}#npc-talk-dialog .npc-opt-key{display:none}} @media (max-height:480px){#npc-talk-dialog .menu-body{max-height:calc(100vh - 110px);overflow:auto}#npc-talk-dialog .npc-talk-line{margin-bottom:8px}}