@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Playfair+Display:ital,wght@0,500;0,700;0,800;1,600&family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');
:root{--gold:#d5b575;--ink:#f4eedc;--muted:#aebdb8;--panel:rgba(20,39,38,.92)}*{box-sizing:border-box}body{margin:0;background:#1c403a;color:var(--ink);font:13px Manrope,Segoe UI,sans-serif;overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #ffffff26;background:#ffffff08;border-radius:5px;padding:12px 18px;transition:.18s}button:hover{background:#ffffff18;border-color:var(--gold)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--gold)}[hidden]{display:none!important}canvas#world{position:fixed;width:100%;height:100%;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,27,26,.92),rgba(10,27,26,.55) 38%,transparent 72%),linear-gradient(0deg,#102724b0,transparent 30%)}body.playing .vignette{background:linear-gradient(0deg,#102724a0,transparent 24%,transparent 85%,#10272490)}header{position:fixed;top:0;left:0;right:0;padding:25px 38px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;z-index:3}.brand{display:flex;gap:12px;align-items:center;color:var(--gold);text-decoration:none;font:32px Georgia;letter-spacing:5px}.brand>span{font-size:22px}.brand small{display:block;font:8px Manrope;letter-spacing:5px;margin-top:5px}.realm{font-size:10px;letter-spacing:1.7px;color:#e2eadd}.realm i{display:inline-block;background:#8adbab;width:6px;height:6px;border-radius:50%;margin-right:8px;box-shadow:0 0 12px #87e9af}.realm span{display:inline-block;margin-left:18px;color:#9cb7a4;letter-spacing:0}header button{padding:9px 13px}header button span{margin-left:8px;font-size:11px}#welcome{position:fixed;left:8%;top:22%;max-width:510px;max-height:calc(100vh - 50px);overflow-y:auto;padding-right:4px}.eyebrow{font-size:9px;letter-spacing:3px;color:var(--gold)}h1{font:76px/.98 'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-2px;margin:25px 0}h1 em{color:#dbbf89;font-weight:400}#welcome>p{font-size:12px;line-height:1.9;color:#b9c8c0}.login-card{margin-top:20px;width:338px;padding:19px;background:#172b2bd9;border:1px solid #bfa66a45;border-radius:8px;box-shadow:0 20px 50px #0003}.login-card label{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);margin:8px 0 4px}.login-card label input{margin:0}.card-title{font-size:9px;letter-spacing:1.4px;display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.card-title span{color:var(--gold);font-size:20px}.provider{width:100%;background:#eae9df;color:#243c37;margin:4px 0;font-size:12px;font-weight:700}.provider:hover{background:white}.provider .g{color:#4285f4;margin-right:12px}.gold{background:#d4b57c;color:#20332c;border-color:#edce94;font-weight:700;width:100%;font-size:12px}.gold:hover{background:#e8c993}.gold span{float:right}.divider{text-align:center;font-size:8px;letter-spacing:2px;color:#839991;margin:13px 0 10px}.error-text{display:block;color:#e08a7a;font-size:10px;margin:-6px 0 10px;text-align:center}#auth-toggle{display:block;text-align:center;margin-bottom:4px}#auth-toggle a{color:var(--gold)}#auth-submit{margin-top:10px}.login-card>small{display:block;text-align:center;font-size:9px;color:#9aada3;margin-top:13px}.features{display:flex;gap:25px;font-size:8px;letter-spacing:1px;margin-top:25px;color:#a1b7a8}footer{position:fixed;bottom:20px;left:38px;right:38px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#a2b6a5}footer span{letter-spacing:1px}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,92vw);z-index:10;background:#172d2cf5;border:1px solid #c4ab6f70;border-radius:12px;padding:32px;box-shadow:0 40px 100px #0009}h2{font:32px 'Cormorant Garamond',Georgia;margin:16px 0}.modal p{color:#abbcb2;font-size:12px;line-height:1.8}.portrait{text-align:center;font-size:64px;color:var(--gold);padding:10px}.modal label{font-size:9px;letter-spacing:2px}input{background:#0e2328a0;border:1px solid #ffffff20;color:white;border-radius:4px;padding:12px;width:100%;outline:none}.modal input{margin:10px 0 15px}.gender{display:flex;gap:10px;margin-bottom:20px}.gender button{flex:1;font-size:12px}.selected{border-color:var(--gold);background:#d5b57522}.panel{background:var(--panel);border:1px solid #bcc19a40;border-radius:7px;box-shadow:0 8px 20px #0002;backdrop-filter:blur(9px)}.player{position:fixed;top:106px;left:30px;display:flex;gap:12px;padding:14px;width:280px}.avatar{width:48px;height:57px;border:1px solid #bfb48560;display:grid;place-items:center;font-size:30px;color:var(--gold);background:#415f52}.player>div+div{flex:1}.player strong{font-size:12px}.player #level{display:inline-block;background:linear-gradient(145deg,#e8c98a,#c69a56);color:#20291f;font-weight:800;font-size:10px;letter-spacing:.4px;padding:2px 7px;border-radius:5px;margin-right:8px;vertical-align:middle;box-shadow:0 2px 6px #0004}.player small{font-size:7px;color:#a7b8a9;letter-spacing:1px}.bar{height:12px;background:#0c2425;margin-top:7px;position:relative;border-radius:3px;overflow:hidden}.bar i{display:block;height:100%;background:#87b89a;transition:width .2s}.bar span{position:absolute;inset:0;text-align:center;font-size:8px;color:white}.xp{height:3px;margin-top:4px}.xp i{background:#d4b57c}.map{position:fixed;right:30px;top:106px;width:204px;padding:12px}.map>div{font-size:9px;color:#e1cf9e;letter-spacing:1px}.map span{float:right;font-size:7px;color:#90ab9c}.map canvas{width:100%;margin:8px 0}.map small{font-size:8px;color:#9db7a4}.quest{position:fixed;right:30px;top:287px;width:240px;padding:17px}.quest small{font-size:8px;letter-spacing:1.8px;color:var(--gold)}.quest h3{font:19px Georgia;line-height:1.3;margin:10px 0}.quest p{font-size:10px;color:#a7bdb0}.quest #quest-progress{color:#e2d2a4;font-size:11px;margin:14px 0}.quest button{font-size:10px;padding:8px;width:100%}.bottom{position:fixed;bottom:25px;left:30px;right:30px;display:flex;align-items:end;justify-content:space-between;pointer-events:none}.bottom>*{pointer-events:auto}.location{font-size:10px;letter-spacing:2px}.location small{display:block;font-size:9px;letter-spacing:0;color:#a1b6a7;margin-top:7px}.hotbar{display:flex;gap:8px}.hotbar button{background:#1c3331ed;border:1px solid #b7b08960;width:89px;height:74px;padding:8px}.hotbar span{display:block;color:#d8c194;font-size:28px}.hotbar small{display:block;font-size:7px;margin-top:5px;color:#b8c4af}.hotbar button:first-child{border-color:#d4b57c;background:#4b5940e8}.coins{color:var(--gold);font-size:19px;min-width:160px;text-align:right}.coins small{font-size:8px;margin-left:8px;letter-spacing:2px}.chat{position:fixed;bottom:123px;left:30px;width:285px;padding:12px;font-size:10px}.chat #messages{height:76px;overflow:auto;line-height:1.8;color:#bdcabc}.system{color:#cdbb88}.chat form{display:flex;margin-top:8px}.chat input{padding:6px;font-size:10px;border:0;background:#081b2440}.chat button{padding:4px 10px;border:0}#inventory{position:fixed;right:285px;top:110px;width:280px;padding:20px;z-index:5}#inventory .card-title button{padding:0 8px;font-size:20px}#stats{color:#d6bd85;font-size:11px}#items button{width:100%;display:flex;justify-content:space-between;align-items:center;margin:7px 0;font-size:12px;padding:12px}#items small{color:#97b6a1;font-size:9px}#inventory>small{font-size:9px;color:#9fbaab}#joystick{display:none;touch-action:none;position:fixed;left:25px;bottom:30px;width:112px;height:112px;border-radius:50%;background:#c5d6b720;border:1px solid #e2e5c640}#joystick div{position:absolute;left:34px;top:34px;width:42px;height:42px;border-radius:50%;background:#d4c6a276;border:1px solid #ddd2aa80}#hotbar{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);display:flex;align-items:center;flex-wrap:wrap;justify-content:center;max-width:92vw;gap:6px;z-index:6;cursor:grab;touch-action:none;user-select:none}#hotbar:active{cursor:grabbing}#hotbar-grip{padding:0 4px;color:#9aada377;letter-spacing:-1px;font-size:14px;text-shadow:0 1px 3px #000a}#hotbar .hslot{width:42px;height:42px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;background:#1c3331ed;border:1px solid #b7b08960;box-shadow:0 3px 10px #0008;cursor:pointer}#hotbar .hslot span{font-size:17px;line-height:1}#hotbar .hslot img{width:20px;height:20px;object-fit:contain}#hotbar .hslot small{position:absolute;top:2px;right:3px;font-size:7px;color:#c9b98a;background:#0000007a;border-radius:2px;padding:0 2px}#hotbar .hslot.drag-over{outline:2px solid #8fdfdc;background:#24504bed}#death-overlay{position:fixed;inset:0;background:#000000a3;z-index:9}#death-modal{z-index:11;text-align:center;border-color:#a0525270}#death-modal h2{color:#e7c3c3}#death-modal button{width:100%;margin:6px 0;font-size:12px}#death-modal button:disabled{opacity:.35}#death-modal small{display:block;font-size:8px;color:#9db2ab;margin-top:2px}
@media(max-height:800px) and (min-width:701px){#welcome{top:17%}h1{font-size:65px;margin:18px 0}.login-card{margin-top:16px;padding:16px}.features{margin-top:15px}}
@media(max-height:600px){#welcome{top:90px!important;bottom:35px;overflow-y:auto;padding-right:15px;width:min(440px,85vw)}.modal{max-height:92vh;overflow-y:auto}.chat{display:none}.quest{top:100px;width:180px}.quest h3{font-size:15px}.map{display:none}.player{top:92px}.bottom{bottom:12px}}
@media(max-width:700px){header{padding:17px 18px}.brand>span{font-size:16px}.brand{font-size:25px;gap:7px}.brand small{font-size:6px}.realm{font-size:7px;letter-spacing:0}.realm span{display:block;margin:5px 0 0 14px}header button span{display:none}header button{padding:6px 10px}#welcome{left:7%;top:17%;right:7%}h1{font-size:57px;margin:20px 0}.login-card{width:min(338px,100%);margin-top:20px;padding:15px}#welcome>p{font-size:11px}.features{gap:12px;font-size:6px}footer{left:20px;right:20px;bottom:12px;font-size:6px}footer span{display:none}.vignette{background:linear-gradient(90deg,#0e2927df,#112e2990 70%,#122e2940)}.player{left:12px;top:83px;width:220px;padding:9px}.avatar{height:45px;width:37px}.map{right:12px;top:83px;width:100px;padding:7px}.map canvas{height:57px}.map>div{font-size:7px}.map span,.map small{display:none}.quest{right:12px;top:175px;width:175px;padding:12px}.quest h3{font-size:15px}.quest small{font-size:7px}.quest p{font-size:9px}.quest button{font-size:9px}.chat{left:12px;bottom:166px;width:180px;background:#17332a99;padding:8px}.chat #messages{height:45px;font-size:8px}.bottom{bottom:25px;left:150px;right:12px}.location{display:none}.coins{position:fixed;right:20px;bottom:115px;font-size:14px;min-width:0}.hotbar{margin-left:auto;gap:5px}.hotbar button{width:59px;height:62px;padding:5px}.hotbar small{font-size:6px}.hotbar span{font-size:23px}#joystick{display:block}#inventory{right:12px;top:170px;width:265px}#hotbar .hslot{width:36px;height:36px}}
/* Raviara: iron, frost, ember. */
:root{--gold:#d2b17c;--ink:#f0eee3;--muted:#9aafb8;--panel:rgba(22,34,41,.96)}body{background:#263941}.brand{letter-spacing:3px}.brand>span{font-size:20px}.brand small{letter-spacing:4px}.vignette{background:linear-gradient(90deg,#10222bee,#12283299 40%,transparent 75%),linear-gradient(0deg,#12242da0,transparent 35%)}.panel,.modal,.login-card{border-color:#9cb0b940;background-color:var(--panel)}.player .avatar{background:#344a55}.bar.sp{height:10px;margin-top:4px}.sp i{background:#739fb8}.player{width:285px}.player .avatar{height:69px}.realm span{margin-left:12px}.realm #fps{color:#c3b597}.quest{top:287px;padding:14px;font-size:10px}.quest-divider{height:1px;background:#bcc7bc20;margin:14px 0}.quest #quest-progress{margin:9px 0}.quest #auto-status{font-size:10px;line-height:1.6;min-height:30px}#gate-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:12px 0}#gate-buttons button{font-size:9px;padding:8px 3px}.gate-north{grid-column:2;grid-row:1}.gate-west{grid-column:1;grid-row:2}.gate-east{grid-column:3;grid-row:2}.gate-south{grid-column:2;grid-row:3}.quest #return-button{margin-top:12px}#target-panel{position:fixed;top:104px;left:50%;transform:translateX(-50%);width:260px;padding:12px 18px;text-align:center;z-index:3}#target-panel>small{font-size:8px;letter-spacing:1.4px;color:#bba98c}#target-panel>strong{display:block;font-size:13px;margin:6px 0}#target-panel .bar{height:13px}#target-hp{background:#b77565}#target-panel #clear-target{position:absolute;right:4px;top:2px;border:0;padding:2px 7px;font-size:18px}#target-range{display:block;margin-top:7px}.bottom{align-items:center}.hotbar button{width:73px;height:68px}.hotbar small{font-size:6px}.hotbar button.active{border-color:#89c9b8;background:#406c62}.coins{min-width:110px;color:#d2dee3}.location{max-width:180px;min-width:140px}.game-window,#inventory.game-window{position:fixed;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:min(780px,94vw);max-height:calc(100dvh - 140px);overflow:auto;z-index:9;padding:24px;box-shadow:0 30px 100px #0008;border:1px solid #9aaea963}#inventory.game-window{height:calc(100dvh - 140px)}.window-title{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid #aabca52c;margin-bottom:16px}.window-title small{color:var(--gold);font-size:9px;letter-spacing:2px}.window-title h2{margin:7px 0 15px;font-size:29px}.window-title>button{border:0;font-size:24px;padding:0 9px}.character-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}.section-label{font-size:10px;letter-spacing:2px;color:var(--gold);margin:20px 0 12px;display:flex;justify-content:space-between}.section-label b{letter-spacing:0;font-size:11px}.stat-row{display:flex;gap:15px;align-items:center;padding:8px 0;border-bottom:1px solid #afbec518}.stat-row>div{flex:1}.stat-row strong{font-size:12px;letter-spacing:2px}.stat-row small{display:block;font-size:9px;color:#9bb1bc;margin-top:3px}.stat-row>b{font-size:17px;color:#eee1be}.stat-row button{padding:3px 10px;font-size:18px;color:var(--gold)}.muted{font-size:10px;color:#9cabb3;line-height:1.7}.character-columns>div>small{display:block;margin-top:10px}#derived{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}#derived>div{padding:8px;background:#ffffff05;border:1px solid #adc4cb15}#derived small{display:block;font-size:8px;color:#a9bec6}#derived b{display:block;font-size:13px;margin-top:5px}.class-control{display:flex;gap:10px;margin:12px 0 6px}select{font:inherit;color:#ebeadc;border:1px solid #98aeb244;background:#243b46;padding:10px;border-radius:4px;min-width:0}.class-control select{flex:1;font-size:11px}.class-control button{padding:8px 12px;font-size:11px}#create-class{width:100%;margin:10px 0 20px}#character-vitals{font-size:11px;color:#afc4d0;line-height:1.8}.equip-slot{display:flex;justify-content:space-between;align-items:center;background:#ffffff04;border:1px solid #9db3b424;border-left:2px solid #b49d67;padding:10px;margin-bottom:7px}.equip-slot small{display:block;color:#9fb3bd;font-size:9px;margin-bottom:4px}.equip-slot span{font-size:11px}.equip-slot button{font-size:9px;padding:5px 8px}#skills.game-window{width:min(500px,94vw)}.skill-empty{text-align:center;padding:30px 15px}.skill-row{padding:16px;border:1px solid #a9956b40;border-radius:8px;margin:12px 0}.skill-row-head{display:flex;justify-content:space-between;align-items:center}.skill-row-head strong{font-size:14px}.skill-row-head small{color:var(--gold)}.skill-row p{margin:6px 0}.skill-bar{height:10px;margin:10px 0}.skill-row button{width:100%}#skill-job-info{color:var(--gold);font-size:11px;margin:10px 0}.skill-empty>div{font-size:70px;color:#b5a074}.skill-empty h3{font:28px Georgia}.skill-empty p{font-size:12px;color:#a8b9bf;line-height:2}.skill-empty span{font-size:8px;letter-spacing:2px;line-height:2.5;color:#7f98a2}#inventory.game-window{width:min(690px,94vw)}#bag-weight{font-size:11px;color:#b5c6cd}.bag-tabs{display:flex;gap:6px;margin:18px 0}.bag-tabs button{flex:1;font-size:11px;padding:10px}.bag-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-height:220px}#items{max-height:310px;overflow:auto}#items .bag-item{display:grid;grid-template-columns:32px 1fr;text-align:left;gap:4px;padding:10px;font-size:11px;margin:0 0 6px}.bag-item .item-icon{grid-row:span 2;font-size:25px;color:var(--gold)}#items .bag-item small{grid-column:2;font-size:9px;color:#92acae}.bag-item.chosen{border-color:#c1a879;background:#c1a87916}#item-detail{padding:15px;background:#101f2766;border:1px solid #a2b6b020}#item-detail h3{font:24px Georgia;margin:5px 0 15px}#item-detail p{font-size:11px;line-height:1.7}#item-detail>small{font-size:10px;line-height:1.9;color:#acbac0}.item-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}.card-target-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:160px;overflow:auto}.card-target-list button{text-align:left;font-size:11px;padding:8px 10px}
.quest .quest-divider,.quest .quest-divider~small,.quest #quest-progress,.quest #claim,.quest #frog-progress,.quest #claim-frog{display:block!important}.quest .quest-divider{display:block!important}#claim,#claim-frog{width:100%;margin-top:4px}.item-actions button{padding:8px 10px;font-size:10px}.chat{width:255px}#character,#skills,#inventory{scrollbar-width:thin;scrollbar-color:#566c75 #1c2c34}#toast{background:#142832f5}
@media(max-width:1050px){.location{display:none}.bottom{justify-content:center;gap:20px}.coins{min-width:70px}#target-panel{width:210px}.player{width:240px}.character-columns{gap:18px}}
@media(max-width:700px){header{padding:15px}.brand>span{font-size:15px}.brand small{font-size:5px}.brand{font-size:25px}.realm{font-size:6px}.realm span{margin:4px 0 0 12px}.player{top:90px;width:205px;padding:8px;left:10px}.player .avatar{width:29px;height:61px;font-size:24px}.player strong{font-size:10px}.map{top:90px;right:10px;width:108px}.quest{top:190px;right:10px;width:145px;padding:10px;background:#182b32da}.quest .quest-divider,.quest .quest-divider~small,.quest #quest-progress,.quest #claim,.quest #frog-progress,.quest #claim-frog{display:none}.quest #auto-status{font-size:8px;min-height:0}.quest>small{font-size:7px}#gate-buttons{gap:2px;margin:9px 0}#gate-buttons button{font-size:7px;padding:7px 1px}.quest button{font-size:8px;padding:7px}.chat{bottom:200px;width:170px;left:10px}#target-panel{top:180px;left:10px;transform:none;width:180px;padding:9px 13px}#target-panel strong{font-size:12px}#target-panel>small{font-size:7px}.bottom{bottom:16px;left:135px;right:10px;display:block}.hotbar{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.hotbar button{width:100%;height:58px;padding:4px}.hotbar span{font-size:21px}.hotbar small{font-size:6px}.coins{bottom:150px;right:15px;font-size:13px}#joystick{left:15px;bottom:23px;width:104px;height:104px}#joystick div{left:30px;top:30px}.game-window,#inventory.game-window{top:50%;max-height:calc(100dvh - 100px);padding:17px;width:94vw}#inventory.game-window{height:calc(100dvh - 100px)}.character-columns{grid-template-columns:1fr;gap:4px}.class-control{flex-wrap:wrap}.window-title h2{font-size:25px}.bag-columns{grid-template-columns:1fr;gap:12px}#items{max-height:220px}#item-detail h3{font-size:21px}#derived{grid-template-columns:repeat(3,1fr)}#toast{bottom:152px}.bag-tabs button{font-size:10px}}
@media(max-height:600px){.game-window{max-height:94dvh}#inventory.game-window{height:94dvh}.quest{display:none}.map{display:none}.chat{display:none}#target-panel{top:95px}.hotbar button{height:51px}.coins{bottom:75px}.player{top:88px}}
@media(max-width:700px){#target-panel{left:50%;top:190px;transform:translateX(-50%);width:210px}.has-target .quest{top:300px}}
/* Inventory slots and mobile combat controls */
.gear-icon{width:42px;height:42px;object-fit:contain;pointer-events:none}.character-columns{grid-template-columns:1fr}#character.game-window{width:min(540px,94vw)}#inventory.game-window{width:min(820px,94vw)}.inventory-layout{display:grid;grid-template-columns:240px 1fr;gap:24px}.paperdoll{position:relative;padding:0 10px 12px;background:radial-gradient(ellipse,#49606a44,transparent 70%);border-right:1px solid #a9bdc022}.doll-silhouette{position:absolute;top:100px;left:50%;transform:translateX(-50%);font:220px Georgia;color:#a4bbc00b;pointer-events:none}#equipment-slots{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,70px);gap:8px}.equip-slot{position:relative;display:flex;flex-direction:column;justify-content:center;padding:4px;margin:0;border:1px solid #9eabb14a;background:linear-gradient(135deg,#283b46,#14232c);border-radius:5px;box-shadow:inset 0 0 12px #0005}.equip-slot small{font-size:8px;margin:0 0 2px;white-space:nowrap}.equip-slot button{position:absolute;right:0;bottom:0;padding:0 4px;font-size:13px;background:#182631}.empty-gear{font-size:25px;color:#70858d55}.slot-head{grid-area:1/2}.slot-rightHand{grid-area:2/1}.slot-armor{grid-area:2/2}.slot-leftHand{grid-area:2/3}.slot-cloak{grid-area:3/2}.slot-belt{grid-area:4/2}.slot-accessoryLeft{grid-area:4/1}.slot-accessoryRight{grid-area:4/3}.slot-boots{grid-area:5/2}.bag-tabs{margin:15px 0 10px}.bag-tabs button{padding:9px 4px;font-size:10px}.bag-columns{display:block;min-height:0}#items{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;max-height:none;overflow:visible}#items .bag-item,.empty-bag-slot{width:100%;aspect-ratio:1;min-width:0;position:relative;border:1px solid #77939e40;border-radius:3px;background:linear-gradient(135deg,#263b46,#14232c);box-shadow:inset 0 0 10px #0004}#items .bag-item{display:grid;place-items:center;padding:3px;margin:0}#items .bag-item .gear-icon{width:90%;height:90%}#items .bag-item small{position:absolute;right:4px;bottom:2px;font-size:9px;color:#f6e7ba;text-shadow:0 1px 3px #000}#items .bag-item.chosen{border-color:#e0bd77;background:#b6944933}#item-detail{margin-top:12px;padding:10px;min-height:110px}#item-detail>.gear-icon{float:left;margin:0 10px 5px 0}#item-detail h3{font-size:19px;margin:3px 0 8px}.item-actions{margin-top:10px}.combat-controls{position:fixed;bottom:26px;right:25px;display:flex;align-items:end;gap:9px;z-index:4}.combat-controls button{border-radius:50%;width:64px;height:64px;padding:4px;background:#192e3af2;border:1px solid #b8a37188;box-shadow:0 5px 20px #0005}.combat-controls span{display:block;font-size:26px;color:#e0c18a}.combat-controls small{display:block;font-size:7px}.combat-controls #attack{width:88px;height:88px;background:radial-gradient(circle,#746344,#263944);border:2px solid #cfb27b}.combat-controls #attack span{font-size:35px}.combat-controls .active{background:#326953;border-color:#9dd8bc}.bottom{right:280px}.coins{position:fixed;right:32px;bottom:130px;font-size:16px}.map canvas{aspect-ratio:1;height:auto}.quest{top:350px}.hotbar{display:flex}.hotbar button{width:64px;height:62px}.chat{bottom:112px}
@media(max-width:700px){.inventory-layout{grid-template-columns:1fr;gap:8px}.paperdoll{border-right:0;padding:0 10px 10px;width:250px;margin:auto}#equipment-slots{grid-template-rows:repeat(5,57px);gap:5px}.equip-slot .gear-icon{width:33px;height:33px}.paperdoll .section-label{margin:4px 0 10px}.inventory-right{min-width:0}.bag-tabs{margin-top:3px}.game-window,#inventory.game-window{max-height:calc(100dvh - 80px)}#inventory.game-window{height:calc(100dvh - 80px)}.window-title h2{font-size:24px}.combat-controls{bottom:20px;right:12px;gap:6px}.combat-controls button{width:51px;height:51px}.combat-controls #attack{width:72px;height:72px}.combat-controls small{font-size:6px}.bottom{left:auto;right:12px;bottom:110px}.hotbar{gap:5px}.hotbar button{width:43px;height:44px}.hotbar span{font-size:19px}.hotbar small{font-size:5px}.coins{right:15px;bottom:164px;font-size:12px}.chat{bottom:165px;width:155px}.map canvas{height:auto}.quest{top:220px}.has-target .quest{top:300px}#toast{bottom:220px}.location{display:none}}
#items{grid-template-columns:repeat(6,minmax(0,1fr))}#items .bag-item,.empty-bag-slot{height:48px;aspect-ratio:auto}#items .bag-item .gear-icon{width:36px;height:36px}.inventory-right{min-width:0}#inventory .bag-item{justify-content:center}#inventory.game-window{width:min(760px,94vw)}
@media(max-width:700px){#items .bag-item,.empty-bag-slot{height:auto;aspect-ratio:1}.inventory-layout{grid-template-columns:110px minmax(0,1fr);gap:10px}.paperdoll{width:110px;padding:0}#equipment-slots{gap:3px;grid-template-rows:repeat(5,49px)}.equip-slot{padding:2px}.equip-slot small{font-size:6px}.equip-slot .gear-icon{width:26px;height:26px}.equip-slot button{font-size:10px}.empty-gear{font-size:20px}.paperdoll .section-label{font-size:8px}.doll-silhouette{font-size:120px}.bag-tabs{gap:3px}.bag-tabs button{font-size:8px;padding:7px 2px}#items{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}#items .bag-item .gear-icon{width:26px;height:26px}#item-detail h3{font-size:16px}#item-detail>.gear-icon{width:30px;height:30px}#inventory.game-window{padding:14px}#item-detail p,#item-detail>small{font-size:9px}.item-actions button{font-size:9px;padding:6px}}
@media(min-width:701px){#inventory.game-window{width:min(680px,94vw)}.inventory-layout{grid-template-columns:220px minmax(0,1fr);gap:18px}#items .bag-item,.empty-bag-slot{height:auto;aspect-ratio:1}#equipment-slots{grid-template-rows:repeat(5,62px)}#item-detail{min-height:95px}}
#items{grid-template-columns:repeat(6,50px);grid-auto-rows:50px;justify-content:start;align-items:start;max-height:none}#items .bag-item,.empty-bag-slot{width:50px;height:50px;aspect-ratio:1}.paperdoll{align-self:start}
@media(max-width:700px){.paperdoll{margin:0}#items{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto}#items .bag-item,.empty-bag-slot{width:100%;height:auto;aspect-ratio:1;align-self:start}}
/* Compact top HUD, character card and channels */
body.playing header{padding:0;border:0;left:auto;right:12px;top:8px;width:160px;display:block;pointer-events:none}body.playing .brand{display:none}body.playing .realm{font-size:8px;letter-spacing:.3px;text-align:center}body.playing .realm span{display:inline-block;margin:4px 4px 0;font-size:8px}body.playing .player{left:12px;top:12px;width:300px;padding:12px}.player canvas.avatar{width:84px;height:98px;object-fit:cover;border-color:#baa27570}.player #class-label{font-size:8px}body.playing .map{display:block;top:48px;right:12px;width:150px;padding:8px}body.playing .map canvas{display:block;width:100%;height:auto;margin:6px 0}.map small{font-size:7px}body.playing #target-panel{top:8px;left:50%;transform:translateX(-50%);width:230px;padding:8px 14px}#target-panel>small{font-size:7px}#target-panel>strong{margin:3px 0;font-size:12px}body.playing .quest{top:240px;right:12px;width:180px;padding:12px;background:#142933db}.quest #gate-buttons button{padding:7px 2px}.quest .quest-divider,.quest .quest-divider~small,.quest #quest-progress,.quest #claim,.quest #frog-progress,.quest #claim-frog{display:none}.quest #auto-status{font-size:9px}.combat-controls #auto-button{width:78px;height:78px;border:2px solid #e0bd72;background:linear-gradient(145deg,#796031,#33454b);box-shadow:0 0 18px #e2b66540}.combat-controls #auto-button span{font-size:34px}.combat-controls #auto-button small{font-size:9px;font-weight:800;letter-spacing:1px}.combat-controls #auto-button.active{background:linear-gradient(145deg,#3b9575,#174935);border-color:#9affd1;box-shadow:0 0 20px #6cf6a97a}.combat-controls #bot-settings-button{position:absolute;right:86px;bottom:79px;width:32px;height:32px;font-size:20px;padding:0;background:#182d38;border-color:#d4bd8a}.bot-option{display:flex;align-items:center;gap:12px;font-size:14px!important;letter-spacing:0!important}.bot-option input{width:22px;height:22px;accent-color:#7dc2a5}.slot-costumeHead{grid-area:6/1/7/2;border-color:#a781b1}.slot-costumeBody{grid-area:6/3/7/4;border-color:#a781b1}#equipment-slots{grid-template-rows:repeat(6,62px)}#reset-stats{font-size:10px;padding:7px 12px;color:#e3c38c}.chat{display:block;left:12px;bottom:12px;width:460px;padding:8px;z-index:4;background:#101f2bdb;border-color:#a5bbc34a}.chat-tabs{display:flex;gap:3px;border-bottom:1px solid #a7babc2b;padding-bottom:6px}.chat-tabs button{padding:5px 6px;font-size:9px;flex:1;white-space:nowrap}.chat-tabs .selected{color:#edcc8a}.chat #messages{height:170px;font-size:10px;line-height:1.75;scrollbar-width:thin;overflow-wrap:anywhere}.chat #chat-hint{font-size:8px;color:#8da6b5;padding:5px 0}.chat .channel-exp{color:#c8b6f1}.chat .channel-loot{color:#a4d6b3}.chat .channel-party{color:#93cce9}.chat .channel-world{color:#cfb98c}.chat input{font-size:10px}.bottom{left:380px;right:300px;justify-content:center}.location{display:none}
@media(max-width:700px){body.playing .player{left:8px;top:8px;width:210px;padding:8px;gap:8px}.player canvas.avatar{width:56px;height:65px}.player #class-label{font-size:6px}.player .bar{height:9px}.player .bar.xp,.player .bar.jobxp{height:3px}.player strong{font-size:9px}body.playing header{right:8px;top:6px;width:105px}body.playing .realm,body.playing .realm span{font-size:6px}body.playing .map{right:8px;top:40px;width:100px;padding:6px}body.playing #target-panel{top:86px;width:174px;left:8px;transform:none;padding:6px 10px}body.playing .quest,body.playing.has-target .quest{top:160px;right:8px;width:132px;padding:8px}.chat{width:min(310px,calc(100vw - 20px));bottom:174px;left:8px;padding:6px}.chat #messages{height:67px;font-size:9px}.chat-tabs button{font-size:8px;padding:5px 2px}.chat #chat-hint{font-size:7px}.combat-controls #auto-button{width:64px;height:64px}.combat-controls #auto-button span{font-size:27px}.combat-controls #auto-button small{font-size:7px}.combat-controls #bot-settings-button{right:72px;bottom:69px;width:29px;height:29px;font-size:18px}.bottom{left:auto;right:8px;bottom:115px}.coins{bottom:154px}#equipment-slots{grid-template-rows:repeat(6,49px)}}
@media(min-width:701px) and (max-width:1250px){body.playing #target-panel{width:180px;left:52%}.chat{width:285px}.bottom{left:300px;right:250px}.hotbar button{width:49px}body.playing .player{width:230px}body.playing header{width:220px}#quick-menu{right:150px}}
@media(max-width:700px){body.playing .player{width:172px}.player canvas.avatar{width:42px;height:49px}.player strong{font-size:8px}.player #level{font-size:8px}body.playing #target-panel{top:8px;left:164px;width:calc(100vw - 280px);min-width:82px;max-width:140px;padding:5px}#target-panel>strong{font-size:9px}#target-panel>small{font-size:5px}#target-panel #target-range{font-size:6px}#target-panel #clear-target{font-size:13px;padding:0 3px}}
#items{max-height:280px;overflow-y:auto;overflow-x:hidden;align-content:start;padding-right:4px;scrollbar-width:thin}#bag-count{margin:0 0 7px;color:#ccb98d}
@media(max-width:700px){#items{max-height:265px;overflow-y:auto}}
 .item-serial{overflow-wrap:anywhere;font:9px monospace!important;color:#b9c6d0}
#bot-monsters{display:grid;gap:10px;margin:12px 0}#bot-monsters .bot-option{font-size:12px!important}#bot-settings{max-height:85dvh;overflow-y:auto}#sound-toggle span{font-size:24px}
@media(max-width:700px){.hotbar{gap:3px}.hotbar button{width:36px}.hotbar small{font-size:5px}}
.boss-label{font-weight:800;text-shadow:0 0 9px #c1812c99}.boss-target{border-color:#e7bd5e!important;box-shadow:0 0 24px #cc832440,inset 0 0 18px #a2692222!important}#bot-monsters .bot-option span{line-height:1.7}#bot-settings{width:min(480px,94vw)}
#game-settings-button{pointer-events:auto;padding:4px 7px;font-size:22px;line-height:1;border-color:#bba87570;background:#192d38}body.playing header{width:195px;padding-right:34px}body.playing #game-settings-button{position:absolute;right:0;top:0}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px!important;letter-spacing:0!important;margin:18px 0}.setting-row input{display:block;width:100%;padding:0;margin:12px 0;accent-color:#d4bb82}#game-settings .bot-option{margin:15px 0;font-size:12px!important}#game-settings{width:min(420px,94vw)}
@media(max-width:700px){body.playing header{width:128px;padding-right:25px}body.playing #game-settings-button{font-size:17px;padding:3px 4px}}

/* SEA channels and collapsible mobile-style menu */
body.playing header{width:210px;right:12px;top:6px}body.playing .realm{padding-right:32px;text-align:right}body.playing .realm #zone-label{font-size:12px;font-weight:700;display:block;margin:0}body.playing .realm #network,body.playing .realm #fps{font-size:13px;font-weight:700;letter-spacing:0;margin:3px 2px}body.playing .map{top:66px}body.playing .quest,body.playing.has-target .quest{top:max(290px,45dvh);transform:translateY(-15%);max-height:calc(100dvh - 410px);overflow:auto}
#quick-menu{position:fixed;top:70px;right:174px;z-index:5;width:108px;text-align:right}#quick-menu button{min-height:44px;background:#142933ed;border-color:#c7b48170;padding:5px;border-radius:9px}#menu-toggle{width:100%;font-size:22px}#quick-menu small{display:block;font-size:10px}#quick-icons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}#quick-icons span{font-size:25px}#quick-menu .coins{position:static;min-width:0;grid-column:1/-1;font-size:13px;padding:5px;background:#142933ed;border-radius:6px;text-align:center}#quick-menu .coins small{font-size:9px;margin:0}.channel-settings{padding-bottom:12px;border-bottom:1px solid #a9956b55;margin-bottom:12px}.channel-settings button{width:100%;margin-top:6px}.channel-settings p{font-size:11px}#game-settings{max-height:calc(100dvh - 32px);overflow:auto}#game-settings select{min-height:44px;width:110px}#game-settings .setting-row{gap:12px}.danger{width:100%;background:#5a2726;border-color:#a5504d;color:#f4d8d6}.danger:hover{background:#743230}
@media(max-width:700px){body.playing header{right:8px;width:174px}body.playing .realm #zone-label{font-size:10px}body.playing .realm #network,body.playing .realm #fps{font-size:11px}body.playing .map{top:68px}#quick-menu{right:116px;top:120px;width:98px}body.playing .quest,body.playing.has-target .quest{top:max(260px,43dvh);max-height:calc(100dvh - 420px);transform:none}#quick-menu small{font-size:9px}}
@media(max-height:600px){body.playing .quest,body.playing.has-target .quest{top:52%;transform:translateY(-10%);max-height:28dvh}body.playing .map{width:100px}#quick-menu{right:124px;top:74px}.chat{max-height:150px}.chat #messages{height:48px}}

body.playing header{width:230px;padding-right:34px}body.playing .realm{padding-right:0}@media(max-width:700px){body.playing header{width:190px;padding-right:25px}}
body.playing header{width:270px;padding:0;display:flex;align-items:flex-start;justify-content:flex-end;gap:10px}body.playing #game-settings-button{position:static;flex-shrink:0}body.playing .realm{padding-right:0;text-align:right;min-width:0}
@media(max-width:700px){body.playing header{width:200px;gap:6px}}
@media(min-width:701px){.player strong{font-size:14px}.player #level{font-size:12px;padding:3px 9px}.player small{font-size:8px}.player .bar{height:20px;margin-top:9px}.player .bar span{font-size:10px}.player .xp{height:6px;margin-top:7px}}
#cast-bar{position:fixed;top:150px;left:50%;transform:translateX(-50%);width:220px;padding:6px 14px;background:#142933db;border:1px solid #9cb0b940;border-radius:8px;text-align:center;z-index:3}body.playing #cast-bar{top:60px}#cast-bar small{font-size:9px;letter-spacing:1px;color:#c9a765}#cast-bar .bar{height:8px;margin-top:5px;background:#0a1f24;border-radius:4px;overflow:hidden}#cast-bar .bar i{display:block;height:100%;background:linear-gradient(90deg,#8fd6e0,#e9c17f);transition:width .08s linear}
#summon-badge{position:fixed;left:12px;top:150px;display:flex;align-items:center;gap:6px;padding:4px 10px;background:#182d38dd;border:1px solid #9be9d970;border-radius:20px;z-index:3;color:#bdf3e0;font-size:11px}body.playing #summon-badge{top:120px}#summon-badge span{font-size:14px}
.bot-potion-row{display:flex;align-items:center;gap:10px;margin:8px 0}.bot-potion-row .bot-option{flex:0 0 auto}.bot-potion-row input[type=range]{flex:1;accent-color:#d4bb82}.bot-potion-row b{min-width:32px;text-align:right;font-size:11px;color:var(--gold)}
.active-skill-row{border-color:#8fd6e060}.skill-drag-body{display:flex;gap:10px;align-items:center;cursor:grab;padding:6px;border-radius:6px;background:#ffffff08}.skill-drag-body:active{cursor:grabbing}.skill-drag-body img{width:40px;height:40px;border-radius:6px;border:1px solid #ffffff30}.skill-drag-body p{margin:0 0 4px}
.hslot.on-cooldown{position:relative}.hslot .cd-pie{position:absolute;inset:0;border-radius:5px;background:conic-gradient(#000000b0 calc(var(--p,0)*1%),transparent 0);pointer-events:none}.hslot .cd-text{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}
.npc-modal{position:fixed;left:8%;top:28%;right:auto;transform:none;width:min(360px,88vw);max-height:60vh;overflow-y:auto;z-index:22}.npc-modal .window-title{cursor:grab;user-select:none}.npc-modal .window-title:active{cursor:grabbing}#npc-options{display:flex;flex-direction:column;gap:8px;margin-top:12px}#npc-options button{text-align:left}#npc-lines{color:var(--ink);line-height:1.6;margin:4px 0}
.bot-loot-filter{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 14px 26px}.bot-loot-filter .bot-option.small{font-size:11px!important;gap:7px}.bot-loot-filter .bot-option.small input{width:16px;height:16px}
#bot-start{display:block;width:100%;margin-top:16px;font-weight:700;letter-spacing:.5px}
#bag-weight{display:flex;gap:12px;font-size:11px;color:#b5c6cd;margin-bottom:14px}.bag-stat{flex:1;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:1px solid #ffffff1c;background:#ffffff08}.bag-stat span{font-size:20px;line-height:1}.bag-stat small{display:block;font-size:9px;letter-spacing:1px;color:#9cabb3;margin-top:2px}.bag-stat b{display:block;font-size:15px;color:var(--ink)}.bag-stat.silver{border-color:#d5b57550}.bag-stat.silver span{color:var(--gold)}.bag-stat.carry span{color:#8fd3e0}#bag-weight.over .bag-stat.carry{border-color:#e08a7580;background:#e08a7514}#bag-weight.over .bag-stat.carry b{color:#f2a893}
#quick-icons{position:absolute;top:0;right:100%;margin-right:8px;display:flex!important;flex-direction:row-reverse;flex-wrap:wrap-reverse;justify-content:flex-end;gap:6px;width:max-content;max-width:min(70vw,320px)}#quick-icons button{width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}#quick-icons button span{font-size:19px}#quick-icons button small{font-size:8px}#quick-icons[hidden]{display:none!important}
#quest-window{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,90vw);max-height:70vh;overflow-y:auto;padding:20px}body.playing #quest-window{left:12px;top:225px;transform:none;right:auto}.quest-entry small{color:var(--gold);letter-spacing:1.5px;font-size:9px}.quest-entry #quest-progress,.quest-entry #frog-progress{margin:8px 0;font-size:13px}.quest-entry button{width:100%}
.window-title.drag-handle{cursor:grab}.window-title.drag-handle:active{cursor:grabbing}
@media(max-width:700px){body.playing #quest-window{top:200px;width:min(260px,88vw)}}
@media(min-width:701px){.player .bar.hp,.player .bar.sp{height:16px;margin-top:6px}.player .bar.xp,.player .bar.jobxp{height:6px;margin-top:5px}}.player .bar.jobxp i{background:#c98fe0}
.character-columns{display:grid;grid-template-columns:1.1fr 1fr;gap:0}.stat-column{padding-right:24px}.derived-column{padding-left:24px;border-left:1px solid #ffffff14}#derived{grid-template-columns:repeat(2,1fr)!important}
@media(max-width:700px){.character-columns{grid-template-columns:1fr}.derived-column{padding-left:0;border-left:0;margin-top:10px;border-top:1px solid #ffffff14;padding-top:14px}.stat-column{padding-right:0}}
.chat #messages{height:110px!important;font-size:13px!important;line-height:1.6!important}.chat-tabs button{font-size:11px!important}#chat-hint{font-size:9px!important}
@media(max-width:700px){.chat #messages{height:88px!important;font-size:12px!important}}
body.touch #joystick{display:block!important}
@media(min-width:701px){body.touch.playing .chat{left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:168px!important;width:min(360px,92vw)!important}}
.compare-box{margin:10px 0;padding:8px 10px;border:1px solid #ffffff20;border-radius:6px;background:#ffffff08}.compare-box small{color:var(--gold)}.compare-box p{margin:4px 0 0;font-size:12px}
@media(max-width:700px){.npc-modal{left:4%;top:18%;width:92vw}}
#invite-banner,#duel-banner{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 16px;border-radius:8px;background:#1c2d1fee;border:1px solid #9fd39f80;box-shadow:0 10px 30px #0007;font-size:12px;max-width:min(92vw,420px)}
#duel-banner{background:#2d1c1cee;border-color:#d39f9f80}#duel-banner button{padding:6px 12px;font-size:11px}
#invite-banner button{padding:6px 12px;font-size:11px}#invite-accept{border-color:#8fd6a0}#invite-decline{border-color:#d68f8f}
#party-window,#friends-window{width:min(360px,90vw)}
#party-members,#friends-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.roster-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:1px solid #ffffff1a;border-radius:6px;background:#ffffff06;font-size:11px}
.roster-row .roster-name{display:flex;align-items:center;gap:8px}
.roster-row .dot{width:7px;height:7px;border-radius:50%;background:#5a6b63;flex:0 0 auto}
.roster-row .dot.online{background:#7fe0a0;box-shadow:0 0 6px #7fe0a0}
.roster-row small{color:#9cb1b8}
#party-code{color:var(--gold);letter-spacing:1px}
#trade-window{width:min(560px,94vw)}.trade-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0}.trade-side .section-label{margin-top:0}
#trade-my-items,#trade-their-items{display:flex;flex-direction:column;gap:6px;min-height:80px;max-height:180px;overflow-y:auto;padding:8px;border:1px solid #ffffff14;border-radius:6px;background:#ffffff05;font-size:11px;margin-bottom:10px}
.trade-item-row{display:flex;justify-content:space-between;align-items:center}.trade-item-row button{padding:2px 8px;font-size:14px}
.trade-add{display:flex;gap:6px;margin-bottom:10px}.trade-add select{flex:1;font-size:11px}.trade-add input{width:56px}
#trade-my-status,#trade-their-status{color:var(--gold)}
@media(max-width:700px){.trade-columns{grid-template-columns:1fr}}
.slot-costumeBack{grid-area:6/2/7/3;border-color:#a781b1}
/* Modern glass HUD skin + collapsible chat/quest sidebar */
:root{--glass-strong:rgba(13,26,25,.92);--hud-shadow:0 10px 30px rgba(0,0,0,.4)}
.panel{border-radius:16px;border:1px solid rgba(213,181,117,.24);box-shadow:var(--hud-shadow),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.player{border-radius:7px;border:1px solid #bcc19a40;box-shadow:0 8px 20px #0002;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.map{border-radius:20px}
.map canvas{border-radius:12px}
#target-panel{border-radius:16px}
#hotbar .hslot{border-radius:12px}
#quick-icons button{border-radius:50%}
#menu-toggle,#game-settings-button{border-radius:14px}
.chat{transition:width .18s,padding .18s;padding-right:36px}
#chat-toggle{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;font-size:13px;line-height:1;border-radius:8px;z-index:2;touch-action:manipulation}
.chat.collapsed{width:auto!important;min-width:0;padding:7px 34px 7px 9px;background:var(--glass-strong)}
.chat.collapsed .chat-tabs,.chat.collapsed #messages,.chat.collapsed #chat-hint,.chat.collapsed form{display:none}
#quest-toggle{position:absolute;top:8px;right:8px;padding:3px 8px;font-size:12px;line-height:1;border-radius:8px;z-index:1}
.quest.collapsed{width:auto!important;min-width:0;padding:8px 36px 8px 12px;background:var(--glass-strong)}
.quest.collapsed>small,.quest.collapsed #gate-buttons,.quest.collapsed #return-button,.quest.collapsed #auto-status,.quest.collapsed #shop-button{display:none}
.map canvas{cursor:pointer}
/* Compact character/inventory windows on desktop (Cabal Online style) so they fit on one screen without scrolling. */
@media(min-width:701px){
.game-window{padding:16px;max-height:calc(100dvh - 90px)}
#inventory.game-window{height:calc(100dvh - 90px)}
.window-title{margin-bottom:8px}
.window-title h2{font-size:20px;margin:4px 0 8px}
#reset-stats{padding:5px 10px;font-size:9px}
.class-control{margin:6px 0 4px}
.section-label{margin:6px 0 4px}
.stat-row{padding:2px 0}
.stat-column{padding-right:14px}
.derived-column{padding-left:14px}
#stat-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px}
#derived{gap:4px;grid-template-columns:repeat(3,1fr)!important}
#derived>div{padding:4px}
#derived b{margin-top:1px;font-size:12px}
#derived small{font-size:7px}
#bag-weight{margin-bottom:6px}
.bag-stat{padding:5px 9px}
.bag-tabs{margin:6px 0 5px}
.bag-tabs button{padding:5px 4px}
#equipment-slots{grid-template-rows:repeat(6,42px);gap:4px}
.equip-slot{padding:2px}
.equip-slot .gear-icon{width:30px;height:30px}
#items{grid-template-columns:repeat(8,34px);grid-auto-rows:34px}
#items .bag-item,.empty-bag-slot{width:34px;height:34px}
#items .bag-item .gear-icon{width:25px;height:25px}
#item-detail{margin-top:6px;padding:7px;height:230px;overflow-y:auto}
#item-detail h3{font-size:15px;margin:2px 0 4px}
#item-detail>.gear-icon{width:24px;height:24px}
.character-columns{gap:10px}
}
/* Consistent "cool" red close buttons on every window, and modern themed scrollbars everywhere. */
.window-title>button{border:0;width:28px;height:28px;padding:0;font-size:17px;line-height:1;border-radius:50%;color:#ff8a8a;background:#ff4d4d1a;flex-shrink:0;transition:background .15s,color .15s,transform .2s,box-shadow .15s}
.window-title>button:hover{background:#ff4d4d;color:#fff;box-shadow:0 0 14px #ff4d4d80;transform:rotate(90deg)}
.window-title>button:active{transform:rotate(90deg) scale(.9)}
*{scrollbar-width:thin;scrollbar-color:#4d6863 transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#4d6863;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--gold)}
/* Toast notifications */
#toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%) translateY(10px);z-index:40;padding:10px 20px;border-radius:10px;background:#142832f5;border:1px solid #d5b57550;color:#f4eedc;font-size:12px;box-shadow:0 10px 30px #0008;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:80vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Forge-style refine window: drag equipment + refine stones onto the anvil */
#refine-window.refine-modal{width:min(680px,94vw);text-align:left;background:linear-gradient(160deg,#1c2b28f7,#12201df7);border-color:#d5a15f60;box-shadow:0 40px 100px #0009,0 0 70px #ff8a3a14}
.refine-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:4px}
.refine-station{display:flex;flex-direction:column;padding:16px;border-radius:12px;background:radial-gradient(ellipse at 50% 0%,#ff8a3a16,transparent 60%),#ffffff05;border:1px solid #ffffff14}
.refine-drop-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.refine-drop{width:112px;height:112px;border-radius:12px;border:2px dashed #ffffff2c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;text-align:center;transition:.15s;cursor:pointer;background:#ffffff04}
.refine-drop .drop-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.refine-drop .drop-icon img{width:100%;height:100%;object-fit:contain}
.refine-drop .drop-hint{font-size:8px;color:#8fa19a;line-height:1.4}
.refine-drop .drop-level{font-size:9px;color:var(--gold);line-height:1.3}
.refine-drop.item-drop{border-color:#d5b57555}
.refine-drop.item-drop:hover,.refine-drop.item-drop.drag-over{border-color:var(--gold);background:#d5b57514}
.refine-drop.stone-drop{border-color:#8fd6e050}
.refine-drop.stone-drop:hover,.refine-drop.stone-drop.drag-over{border-color:#8fd6e0;background:#8fd6e014}
.refine-drop.stone-drop.valid-glow{border-color:#8fd6e0;box-shadow:0 0 18px #8fd6e055;animation:refine-pulse 1.1s ease-in-out infinite}
.refine-drop.reject{animation:refine-shake .4s}
.refine-station-arrow{display:flex;flex-direction:column;align-items:center;gap:2px;color:#9cabb3;font-size:18px}
.refine-station-arrow b{font-size:13px;color:#8fd6e0}
@keyframes refine-pulse{0%,100%{box-shadow:0 0 10px #8fd6e040}50%{box-shadow:0 0 24px #8fd6e0a0}}
@keyframes refine-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.refine-chance{margin:14px 0;text-align:center}
.refine-chance b{font-size:32px;display:block;color:#8de0a0}
.refine-chance small{color:#9cabb3;letter-spacing:1px}
.refine-chance-bar{height:8px;background:#0c2425;border-radius:8px;overflow:hidden;margin-top:8px}
.refine-chance-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5fbf7a,#8de6a5);transition:width .3s}
#refine-fail-note{font-size:11px;margin:8px 0;text-align:center}
.refine-cost{display:flex;justify-content:center;gap:16px;font-size:12px;margin:10px 0}
.hammer-btn{width:100%;margin-top:6px;font-size:13px;letter-spacing:.5px;position:relative}
.hammer-btn .hammer{display:inline-block;margin-right:6px;filter:drop-shadow(0 0 4px #00000080)}
.hammer-btn.striking .hammer{animation:hammer-swing .32s ease-in-out}
@keyframes hammer-swing{0%{transform:rotate(0)}30%{transform:rotate(-48deg)}62%{transform:rotate(18deg)}100%{transform:rotate(0)}}
#refine-window.shake{animation:refine-shake .45s}
#refine-result{margin-top:10px;font-size:12px;text-align:center}
.refine-bag{display:flex;flex-direction:column;min-width:0}
.refine-item-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:190px;overflow-y:auto;margin-bottom:16px}
.refine-item-grid p{grid-column:1/-1}
.refine-stone-row{display:flex;gap:8px}
.refine-stone-row .stone-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;margin:0}
.refine-stone-row .stone-item.valid-target{border-color:#8fd6e0;box-shadow:0 0 12px #8fd6e050}
@media(max-width:700px){.refine-layout{grid-template-columns:1fr}.refine-station{order:2}.refine-bag{order:1}.refine-item-grid{max-height:150px}}
/* Landing/login screen redesign: warmer glow, an epic display face for headings, and a more premium login card. */
body:not(.playing) .vignette{background:radial-gradient(ellipse 900px 700px at 20% 45%,rgba(213,181,117,.12),transparent 60%),linear-gradient(90deg,rgba(10,27,26,.92),rgba(10,27,26,.55) 38%,transparent 72%),linear-gradient(0deg,#102724b0,transparent 30%)}
.brand{font-family:'Cinzel',Georgia,serif;letter-spacing:4px}
h1{font:800 68px/1.05 'Playfair Display',Georgia,serif;letter-spacing:-1px;margin:22px 0;text-shadow:0 6px 28px rgba(0,0,0,.4)}
h1 em{font-style:italic;font-weight:600;background:linear-gradient(135deg,#f3ddab,#d5b575 55%,#a97f42);-webkit-background-clip:text;background-clip:text;color:transparent}
#welcome>p{font-size:13px;line-height:1.85}
.card-title{font-family:'Cinzel',Georgia,serif;letter-spacing:2.5px;font-weight:600}
.login-card{border-radius:14px;border-color:#d5b57550;box-shadow:0 24px 60px #0006,0 0 0 1px #d5b57518 inset;backdrop-filter:blur(6px);position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.login-card label{font-size:10px;letter-spacing:2.5px;color:#d9c9a0;font-weight:600;margin-top:14px}
.login-card .input-wrap{position:relative}
.login-card label input{border-radius:10px;transition:border-color .2s,background .2s,box-shadow .2s,transform .12s;padding:13px 14px 13px 38px;font-size:14px;border:1.5px solid #d5b57538;background:#0e232c99}
.login-card label input::placeholder{color:#6f8a86}
.login-card .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.7;pointer-events:none;filter:saturate(0) brightness(1.6)}
.login-card label input:hover{border-color:#d5b57575}
.login-card label input:focus-visible{border-color:var(--gold);background:#0e232cf0;box-shadow:0 0 0 4px #d5b57528,0 4px 16px #d5b5751f;transform:translateY(-1px)}
.login-card .input-wrap:focus-within .input-icon{opacity:1;filter:none}
#auth-submit{font-size:13px;letter-spacing:1px;padding:14px 18px}
.gold{border-radius:6px;transition:background .18s,transform .18s,box-shadow .18s;box-shadow:0 4px 14px #00000030}
.gold:hover{transform:translateY(-1px);box-shadow:0 8px 22px #00000040}
.features{gap:10px}
.features span{padding:7px 14px;border:1px solid #ffffff1c;border-radius:20px;background:#ffffff06;letter-spacing:1.5px}
@media(max-width:700px){h1{font-size:42px}}
/* Auto Hunt: per-slot HP/SP potion picker (drag an item from the bag, or click to pick from a list) */
.potion-slot{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px dashed #ffffff30;border-radius:8px;background:#ffffff05;flex:0 0 auto;min-width:0;max-width:110px}
.potion-slot:hover,.potion-slot.drag-over{border-color:var(--gold);background:#d5b57514}
.potion-slot-icon{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.potion-slot-icon img{width:100%;height:100%;object-fit:contain}
.potion-slot small{font-size:9px;color:#9cabb3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.potion-pick-list{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;padding:6px;border:1px solid #ffffff14;border-radius:6px;background:#ffffff05}
.potion-pick-list button{text-align:left;font-size:11px;padding:6px 8px;display:flex;align-items:center;gap:8px}
@media(min-width:701px){#bot-settings{left:auto;right:24px;top:50%;transform:translateY(-50%)}}
/* Move the zone/channel status chip to the bottom-left, near the movement wheel, and let the quick-menu
   shortcuts take its old spot up top-right instead. */
body.playing .realm{position:fixed;left:25px;bottom:150px;top:auto;right:auto;width:auto;padding:10px 14px;text-align:left;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#142933ed;border:1px solid #c7b48170;border-radius:10px;box-shadow:0 8px 20px #0004;z-index:4}
body.playing .realm span{margin:0!important}
body.playing .realm #zone-label{font-size:11px;font-weight:700;color:var(--ink)}
body.playing .realm #network,body.playing .realm #fps{font-size:10px;font-weight:600;letter-spacing:0;color:#9cb7a4}
#quick-menu{top:6px;right:64px}
@media(min-width:701px) and (max-width:1250px){#quick-menu{right:64px}}
@media(max-width:700px){
 body.playing .realm{left:12px;bottom:136px;padding:7px 10px}
 body.playing .realm #zone-label{font-size:9px}
 body.playing .realm #network,body.playing .realm #fps{font-size:8px}
 #quick-menu{top:6px;right:50px}
 #bot-settings{width:94vw}
}
@media(max-height:600px){#quick-menu{top:6px}body.playing .realm{bottom:110px}}
/* Status chip (zone · ping · FPS · players online) sits directly above the character card; the card and
   the summon badge below it are pushed down by the chip's height. */
body.playing .realm{left:12px;top:12px;bottom:auto;min-width:300px;box-sizing:border-box;padding:5px 10px;gap:10px;flex-wrap:nowrap;white-space:nowrap;border-radius:7px}
body.playing .realm #online-count{font-size:10px;font-weight:700;letter-spacing:0;color:#8de0a0}
body.playing .player{top:48px}
body.playing #summon-badge{top:156px}
@media(min-width:701px) and (max-width:1250px){body.playing .realm{min-width:230px}}
@media(max-width:700px){
 body.playing .realm{left:8px;top:8px;bottom:auto;min-width:172px;padding:4px 8px;gap:6px}
 body.playing .realm #online-count{font-size:8px}
 body.playing .player{top:34px}
 body.playing #target-panel{top:34px}
}
@media(max-height:600px){body.playing .realm{bottom:auto}}
/* Size the hotbar to its content so moving it (changing left) never re-wraps it and shifts it under the cursor. */
#hotbar{width:max-content}
/* Clicking another player opens their action menu at the top-centre of the screen. */
.npc-modal.player-menu{left:50%;top:12px;right:auto;transform:translateX(-50%);width:min(360px,92vw)}

/* Top-right cluster: minimap, the menu toggle just left of it (shortcuts fan out further left), and the
   settings gear hanging under the minimap's bottom-right corner. The on-screen pickup button is removed (V still works). */
body.playing .map{top:12px;right:12px;width:170px;padding:8px}
body.playing .map #game-settings-button{position:absolute;top:calc(100% + 6px);right:0;width:40px;height:40px;padding:0;font-size:20px;display:flex;align-items:center;justify-content:center}
#quick-menu,body.playing #quick-menu{top:12px;right:190px;width:56px}
#menu-toggle{width:56px;height:56px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
#menu-toggle small{font-size:9px}
#menu-toggle[aria-expanded="true"]{border-color:#e0c18a;background:#24404b}
.qm-icon{display:flex;align-items:center;justify-content:center;color:#e0c18a}
.qm-icon svg{width:22px;height:22px}
#quick-icons button .qm-icon svg{width:21px;height:21px}
#discord-button{background:#5865f2!important;border-color:#8b95ff!important}
#discord-button .qm-icon,#discord-button small{color:#fff}
#pickup-button{display:none!important}
@media(max-width:700px){
 body.playing .map{top:8px;right:8px;width:112px;padding:6px}
 body.playing .map #game-settings-button{width:34px;height:34px;font-size:17px}
 #quick-menu,body.playing #quick-menu{top:8px;right:126px;width:48px}
 #menu-toggle{width:48px;height:48px}
 #quick-icons button{width:48px;height:48px}
}

/* Right-middle quest card is retired. */
.quest,body.playing .quest,body.playing.has-target .quest{display:none!important}
/* Bottom-right controls: ATTACK in the corner, BOT stacked above it, settings gear beside BOT. */
.combat-controls{display:block;width:88px;height:88px;right:25px;bottom:26px}
.combat-controls #attack{position:absolute;right:0;bottom:0}
.combat-controls #auto-button{position:absolute;right:5px;bottom:100px}
.combat-controls #bot-settings-button{right:92px;bottom:122px}
.potion-slot.unset{border-style:dashed;opacity:.75}
.potion-slot small.potion-empty{color:#f2a893}
@media(max-width:700px){
 .combat-controls{width:72px;height:72px;right:12px;bottom:20px}
 .combat-controls #auto-button{right:4px;bottom:82px}
 .combat-controls #bot-settings-button{right:74px;bottom:100px}
}

/* Shown when sound is enabled but the browser hasn't started the audio engine yet. */
#audio-pill{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:30;padding:8px 16px;border-radius:20px;background:#5a2726f2;border:1px solid #e0a15a;color:#fbe3c0;font-size:13px;font-weight:700;box-shadow:0 6px 18px #0006;cursor:pointer}
#audio-status{font-size:11px;letter-spacing:0;text-transform:none}

/* Character card: the info column fills the card (the old ".player>div+div" never matched because the portrait is
   a canvas, so the bars shrank to the name's width). Class name + Job level row; labelled EXP/Job EXP bars. */
.player>div{flex:1;min-width:0}
.player .class-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px}
.player #class-label{font-size:13px;font-weight:800;letter-spacing:.6px;color:#f0d9a4;text-shadow:0 1px 2px #000a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player #job-level{flex:0 0 auto;font-size:10px;font-weight:800;color:#1f1a2b;background:linear-gradient(145deg,#d6b8f0,#a47fcf);padding:2px 7px;border-radius:5px;box-shadow:0 2px 6px #0004}
.player .bar span{display:flex;align-items:center;justify-content:center;font-weight:700;text-shadow:0 1px 2px #000c}
.player .bar.xp,.player .bar.jobxp{height:12px;margin-top:5px}
.player .bar.xp span,.player .bar.jobxp span{font-size:8px;letter-spacing:.3px}
@media(max-width:700px){
 .player #class-label{font-size:10px}
 .player #job-level{font-size:8px;padding:1px 5px}
 .player .bar.xp,.player .bar.jobxp{height:9px;margin-top:3px}
 .player .bar.xp span,.player .bar.jobxp span{font-size:6px}
}
/* Settings: labels stay on one line next to their sliders; the redeem-code row is a proper input + button. */
#game-settings label.setting-row{white-space:nowrap}
#game-settings .setting-row input[type=range]{flex:1;width:auto;min-width:0;margin:0}
#game-settings .code-row{display:flex;align-items:center;gap:8px;margin:16px 0}
#game-settings #setting-code{flex:1;min-width:0;width:auto;height:42px;margin:0;padding:0 12px;font-size:13px;border-radius:8px}
#game-settings #setting-redeem{flex:0 0 auto;height:42px;padding:0 18px;white-space:nowrap;font-size:13px}

/* Quest tracker under the character card (top is set from the card's bottom in JS). */
#quest-tracker{position:fixed;left:12px;top:210px;width:300px;padding:8px 10px;z-index:4;background:#101f2bdb;border-color:#a5bbc34a}
#quest-tracker .qt-head{display:flex;align-items:center;justify-content:space-between}
#quest-tracker .qt-head small{font-size:9px;letter-spacing:1.8px;color:var(--gold);font-weight:800}
#qt-toggle{border:0;background:none;padding:0 4px;font-size:14px;color:#c9b98a;min-height:0}
#quest-tracker.collapsed #qt-list{display:none}
#qt-list{display:flex;flex-direction:column;gap:5px;margin-top:6px;max-height:34vh;overflow-y:auto}
.qt-row{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:center;text-align:left;padding:6px 8px;margin:0;border-radius:7px;background:#ffffff08;border:1px solid #ffffff14;cursor:pointer}
.qt-row b{font-size:11px;color:#f0e2bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt-row small{grid-column:1/-1;font-size:9px;color:#9fb3ad;letter-spacing:0;text-transform:none}
.qt-row.done{border-color:#8de0a066;background:#8de0a012}
.qt-row.done small{color:#8de0a0;font-weight:700}
.qt-tag{font-size:8px;font-weight:800;padding:1px 6px;border-radius:4px;color:#1f1a14}
.qt-tag.main{background:#e8c98a}
.qt-tag.side{background:#9fd3f0}
.qt-new{display:block;font-size:10px;color:#f2d16b;border-style:dashed}
@media(min-width:701px) and (max-width:1250px){#quest-tracker{width:230px}}
@media(max-width:700px){#quest-tracker{left:8px;width:172px;padding:6px}.qt-row b{font-size:9px}.qt-row small{font-size:7px}#qt-list{max-height:24vh}}
/* Refine window: no sideways scrolling; the equipment grid wraps to the screen width and scrolls vertically. */
#refine-window.refine-modal{max-height:92dvh;overflow-y:auto;overflow-x:hidden}
.refine-layout>*{min-width:0}
.refine-item-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));overflow-x:hidden;overflow-y:auto;max-height:min(40vh,300px);padding-right:4px}
.refine-item-grid .bag-item{width:100%;min-width:0;aspect-ratio:1;margin:0;padding:4px;display:grid;place-items:center;position:relative}
.refine-item-grid .bag-item img,.refine-item-grid .bag-item .gear-icon{width:72%;height:72%;object-fit:contain}
.refine-item-grid .bag-item small{position:absolute;right:4px;bottom:2px;font-size:9px;color:#f6e7ba;text-shadow:0 1px 3px #000}
.refine-stone-row{flex-wrap:wrap}
.refine-stone-row .stone-item{min-width:80px}

/* NPC dialogue: each line (e.g. each quest Eira offers) on its own row. */
#npc-lines{white-space:pre-line}

/* NPC shop window (buy / sell) */
#shop-window.game-window{width:min(720px,94vw);z-index:12}
.shop-tabs{display:flex;align-items:center;gap:6px;margin:4px 0 12px}
.shop-tabs button{padding:8px 18px;font-size:12px}
.shop-tabs button.selected{border-color:var(--gold);color:#f0d9a4;background:#d5b57518}
.shop-wallet{margin-left:auto;font-size:13px;color:#e0c18a}
.shop-buy-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;align-content:start;max-height:min(52vh,420px);overflow-y:auto;overflow-x:hidden;padding-right:4px}
.shop-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;margin:0;min-width:0;text-align:center;border-radius:10px}
.shop-card img{width:34px;height:34px;object-fit:contain}
.shop-card .shop-name{font-size:10px;line-height:1.3;color:#e8dcc0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.shop-card .shop-price{font-size:10px;color:#e0c18a}
.shop-card.chosen{border-color:var(--gold);background:#d5b57518;box-shadow:0 0 12px #d5b57530}
.shop-empty{grid-column:1/-1;text-align:center;padding:30px 8px}
.shop-detail{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:12px;background:#ffffff06;border:1px solid #ffffff14;align-self:start}
.shop-detail-head{display:flex;gap:12px;align-items:center}.shop-detail-head img{width:48px;height:48px;object-fit:contain}
.shop-detail-head h3{margin:0 0 4px;font-size:15px}
.shop-qty{display:flex;gap:6px;align-items:center}.shop-qty button{min-width:38px;padding:6px 8px}.shop-qty input{width:70px;margin:0;text-align:center}
.shop-total{font-size:13px;color:#c9d6d0}.shop-total b{color:#e0c18a;font-size:16px}.shop-total b.short{color:#f2a893}
.shop-sell-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.shop-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;max-height:min(50vh,400px);overflow-y:auto;overflow-x:hidden;padding-right:4px}
.shop-slot{aspect-ratio:1;min-width:0;margin:0;padding:3px;display:grid;place-items:center;position:relative;border-radius:6px;background:linear-gradient(135deg,#263b46,#14232c)}
.shop-slot img{width:30px;height:30px;object-fit:contain}.shop-slot small{position:absolute;right:3px;bottom:1px;font-size:9px;color:#f6e7ba;text-shadow:0 1px 3px #000}
.shop-slot.in-basket{opacity:.45;border-color:#e0c18a}
.shop-sell-zone{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:2px dashed #d5b57555;background:#d5b5750a;min-height:220px}
.shop-sell-zone.drag-over{border-color:var(--gold);background:#d5b57520}
.shop-sell-zone .drop-hint{display:none;text-align:center;color:#8fa19a;font-size:11px;margin:auto 0}.shop-sell-zone.empty .drop-hint{display:block}
#shop-sell-list{display:flex;flex-direction:column;gap:6px;max-height:min(34vh,280px);overflow-y:auto}
.shop-sell-row{display:grid;grid-template-columns:28px 1fr 58px 28px;gap:8px;align-items:center;padding:4px 6px;border-radius:8px;background:#ffffff08}
.shop-sell-row img{width:28px;height:28px;object-fit:contain}.shop-sell-name{min-width:0}.shop-sell-name b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-sell-name small{font-size:9px}
.shop-sell-row input{width:58px;margin:0;padding:4px;text-align:center}.shop-remove{padding:2px 0;min-height:0}
.shop-sell-zone .shop-total{margin-top:auto}
@media(max-width:700px){.shop-buy-layout,.shop-sell-layout{grid-template-columns:1fr}.shop-grid{max-height:34vh}.shop-bag{max-height:30vh}}

/* Sell box: − [qty] + stepper per row. */
.shop-sell-row{grid-template-columns:28px 1fr auto 28px}
.shop-sell-qty{display:flex;align-items:center;gap:3px}
.shop-sell-qty input{width:46px}
.shop-step{min-width:26px;min-height:0;padding:4px 0;font-size:14px;line-height:1}
@media(max-width:700px){.shop-sell-qty input{width:38px}}

/* Shop sell hover card */
.shop-tip{position:fixed;z-index:60;width:250px;padding:10px 12px;border-radius:10px;background:#0f1d24f5;border:1px solid #c7b48170;box-shadow:0 12px 30px #000a;pointer-events:none;display:flex;flex-direction:column;gap:6px;font-size:11px;color:#dfe7e2}
.shop-tip[hidden]{display:none}
.shop-tip-head{display:flex;gap:10px;align-items:center}.shop-tip-head img{width:40px;height:40px;object-fit:contain}
.shop-tip-head b{display:block;font-size:13px;color:#f0d9a4}.shop-tip-head small{font-size:10px;color:#9fb3ad}
.shop-tip-stats{margin:0;color:#bfe3c9;font-weight:700;line-height:1.5}
.shop-tip-cards{margin:0;color:#d9b8ff}
.shop-tip small{font-size:10px;color:#9fb3ad;letter-spacing:0;text-transform:none}
.shop-tip-foot{display:flex;flex-wrap:wrap;gap:4px 10px;padding-top:6px;border-top:1px solid #ffffff18;color:#9fb3ad}
.shop-tip-foot b{margin-left:auto;color:#e0c18a}
.shop-tip-id{font-family:monospace}

/* Shared item hover card (itemtip.js) */
.item-tip{position:fixed;z-index:60;width:250px;padding:10px 12px;border-radius:10px;background:#0f1d24f5;border:1px solid #c7b48170;box-shadow:0 12px 30px #000a;pointer-events:none;display:flex;flex-direction:column;gap:6px;font-size:11px;color:#dfe7e2}
.item-tip[hidden]{display:none}
.item-tip-head{display:flex;gap:10px;align-items:center}.item-tip-head img{width:40px;height:40px;object-fit:contain}
.item-tip-head b{display:block;font-size:13px;color:#f0d9a4}.item-tip-head small{font-size:10px;color:#9fb3ad}
.item-tip-stats{margin:0;color:#bfe3c9;font-weight:700;line-height:1.5}
.item-tip-cards{margin:0;color:#d9b8ff}
.item-tip small{font-size:10px;color:#9fb3ad;letter-spacing:0;text-transform:none}
.item-tip-foot{display:flex;flex-wrap:wrap;gap:4px 10px;padding-top:6px;border-top:1px solid #ffffff18;color:#9fb3ad}
.item-tip-foot b{margin-left:auto;color:#e0c18a}
.item-tip-id{font-family:monospace}

/* Landing: sign-up call to action + hint. */
#signup-note{margin:0 0 12px;padding:9px 11px;border-radius:8px;background:#d5b57514;border:1px solid #d5b57540;font-size:12px;line-height:1.6;color:#e6dcc2}
#signup-note b{color:#f0d9a4}#signup-note a{color:var(--gold);font-weight:800;white-space:nowrap}
#auth-hint{display:block;text-align:center;font-size:11px;color:#9fb3ad;margin-top:10px;line-height:1.5}#auth-hint[hidden],#signup-note[hidden]{display:none}
/* Landing on phones: the welcome column fills the screen and scrolls (it used to overflow with no way to reach
   the form), inputs are 16px so iOS doesn't zoom, the status strip is hidden, the card spans the width. */
@media(max-width:700px){
 body:not(.playing) #welcome{position:fixed;inset:0;left:0;right:0;top:0;bottom:0;width:auto;max-width:none;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(84px + env(safe-area-inset-top)) 20px calc(56px + env(safe-area-inset-bottom));box-sizing:border-box}
 body:not(.playing) h1{font-size:clamp(38px,11vw,50px);margin:6px 0 10px;letter-spacing:-1px}
 body:not(.playing) #welcome>p{font-size:13px;margin:0}
 body:not(.playing) .login-card{width:100%;max-width:440px;box-sizing:border-box;margin-top:16px;padding:18px}
 body:not(.playing) .login-card input{font-size:16px}
 body:not(.playing) .features{flex-wrap:wrap;gap:8px;margin-top:16px}
 body:not(.playing) header .realm{display:none}
 body:not(.playing) footer{left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));font-size:7px;background:linear-gradient(transparent,#0e1a1a88);pointer-events:none}
 #signup-note{font-size:12px}
}
/* Short landscape screens (phones sideways): two columns — headline left, login card right — and scrollable. */
@media(max-height:520px) and (orientation:landscape){
 body:not(.playing) #welcome{position:fixed;inset:0;left:0;right:0;top:0;bottom:0;width:auto;max-width:none;max-height:none;overflow-y:auto;padding:76px 6% 44px;box-sizing:border-box;display:grid;grid-template-columns:1fr minmax(300px,380px);grid-template-areas:"title card" "text card" "feat card";column-gap:32px;align-content:start}
 body:not(.playing) #welcome h1{grid-area:title;font-size:clamp(34px,7vw,52px);margin:0 0 8px}
 body:not(.playing) #welcome>p{grid-area:text;margin:0}
 body:not(.playing) .login-card{grid-area:card;width:100%;box-sizing:border-box;margin:0;padding:16px}
 body:not(.playing) .login-card input{font-size:16px}
 body:not(.playing) .features{grid-area:feat;flex-wrap:wrap;gap:8px;margin-top:12px}
 body:not(.playing) header .realm{display:none}
 body:not(.playing) footer{bottom:8px}
}

/* The decorative footer overlaps the landing content on small screens; hide it there. */
@media(max-width:700px),(max-height:520px) and (orientation:landscape){body:not(.playing) footer{display:none}}
/* An older short-screen rule pins #welcome at top:90px!important; the landing overlay must start at the very top. */
@media(max-width:700px),(max-height:520px) and (orientation:landscape){body:not(.playing) #welcome{top:0!important;bottom:0!important}}
/* Landscape: the card spans three grid rows sized by the left column; let it take its own content height. */
@media(max-height:520px) and (orientation:landscape){body:not(.playing) .login-card{align-self:start;height:auto}}
/* Landing on small screens: the fixed header gets a solid fade so scrolled content slides under it cleanly. */
@media(max-width:700px),(max-height:520px) and (orientation:landscape){body:not(.playing) header{background:linear-gradient(180deg,#132322 0%,#132322f2 72%,#13232200 100%);z-index:6}}

/* ---- v0.24.0 ---- */
/* (5) All four character-card bars share one height. */
.player .bar.hp,.player .bar.sp,.player .bar.xp,.player .bar.jobxp{height:14px;margin-top:5px}
.player .bar.hp span,.player .bar.sp span,.player .bar.xp span,.player .bar.jobxp span{font-size:9px;letter-spacing:.2px}
@media(max-width:700px){.player .bar.hp,.player .bar.sp,.player .bar.xp,.player .bar.jobxp{height:10px;margin-top:3px}.player .bar.hp span,.player .bar.sp span,.player .bar.xp span,.player .bar.jobxp span{font-size:7px}}
/* (14) Card holes: slanted squares at the bottom-left of item icons, filled when a card is socketed. */
.card-holes{position:absolute;left:3px;bottom:3px;display:flex;gap:3px;pointer-events:none;z-index:1}
.card-holes i{width:6px;height:6px;transform:rotate(45deg);background:#0b1418;border:1px solid #e0c18a;box-shadow:0 0 2px #000}
.card-holes i.on{background:#b88be0;border-color:#f0dcff}
.shop-card,.equip-slot>div,.bag-item,.shop-slot,.item-tip-icon{position:relative}
.item-tip-icon{display:inline-flex;flex:0 0 auto}.item-tip-icon .card-holes{left:1px;bottom:1px}
.item-tip-starter{color:#f2a893!important}
/* (9) Walk back to town, under the minimap. */
#go-town{display:block;width:100%;margin-top:6px;padding:7px 4px;font-size:11px;border-radius:9px;background:#24404bee;border-color:#c7b48170}
#go-town[hidden]{display:none}
/* (12) Password eye toggle. */
.input-wrap{position:relative}
.eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:6px;min-height:0;border:0;background:none;color:#9fb3ad;cursor:pointer}
.eye-btn svg{width:100%;height:100%}.eye-btn .eye-slash{display:none}.eye-btn.on{color:var(--gold)}.eye-btn.on .eye-slash{display:inline}
#auth-password{padding-right:46px}
/* (13) Version tag, bottom-right corner. */
#app-version{position:fixed;right:6px;bottom:2px;z-index:70;font:600 9px/1.2 Manrope,sans-serif;letter-spacing:.5px;color:#ffffff70;pointer-events:none;text-shadow:0 1px 2px #000a}
/* (10) Storage window. */
#storage-window.game-window{width:min(760px,94vw);z-index:12}
.storage-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.storage-grid.drag-over,#storage-bag.drag-over{outline:2px dashed var(--gold);outline-offset:3px}
.shop-slot.chosen{border-color:var(--gold);box-shadow:0 0 10px #d5b57555}
.storage-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 6px;padding:10px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff14;min-height:50px}
.storage-bar img{width:28px;height:28px;object-fit:contain}.storage-bar b{font-size:12px;color:#f0e2bd}.storage-bar .gold{margin-left:auto;padding:8px 16px}
@media(max-width:700px){.storage-layout{grid-template-columns:1fr}.storage-bar .gold{margin-left:0;width:100%}}
/* Storage bar quantity field was too narrow for 2-3 digit counts. */
.storage-bar .shop-sell-qty input{width:64px;font-size:13px;text-align:center}

/* ---- v0.26.0: redeem popup, PvP channel ---- */
#quick-icons{max-width:min(78vw,330px)}
.pvp-warning{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:#5a27261f;border:1px solid #a5504d88;color:#f7c0b0;font-size:11px;line-height:1.6}
.pvp-warning[hidden]{display:none}
.pvp-modal{width:min(420px,92vw);text-align:center;border-color:#a5504d;z-index:40}
.pvp-badge{font-size:46px;color:#ff7b6b;text-shadow:0 0 18px #ff4b3b88;line-height:1}
.pvp-modal h2{margin:8px 0 12px}
.pvp-rules{list-style:none;padding:0;margin:0 0 16px;text-align:left;display:flex;flex-direction:column;gap:8px}
.pvp-rules li{padding:9px 12px;border-radius:9px;background:#ffffff08;border:1px solid #ffffff14;font-size:13px;line-height:1.5;color:#dfe7e2}
.pvp-rules b{color:#ffb0a0}
.pvp-actions{display:flex;gap:10px}.pvp-actions button{flex:1;padding:12px}
#zone-label.pvp{color:#ff8f7f!important;text-shadow:0 0 8px #ff4b3b66}
.pvp-modal{background:#1a1416!important;box-shadow:0 0 0 100vmax #000000b0,0 30px 80px #000c!important}

/* Training quests tag */
.qt-tag.train{background:#e0a36a}
/* ---- Login: Google / Discord / Guest ---- */
.login-lead{font-size:12px;color:#c9d6cf;line-height:1.6;margin:10px 0 14px}
#google-live{display:flex;justify-content:center;margin:4px 0}#google-live:empty{display:none}
.provider{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:10px}
.provider small{font-weight:500;opacity:.7;font-size:10px}.provider small[hidden]{display:none}
.provider:disabled{opacity:.5;cursor:not-allowed}
.provider.discord-btn{background:#5865f2;color:#fff;border-color:#8891f7}.provider.discord-btn:hover:not(:disabled){background:#6d78f5}
.provider.discord-btn svg{width:20px;height:20px}
#guest-login{padding:13px 18px;font-size:13px;letter-spacing:.5px}
.guest-note{display:block;text-align:center;font-size:10.5px;color:#9fb3ad;margin-top:10px;line-height:1.5}
/* ---- Minimap buttons ---- */
.map-tools{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
.map-tools button{padding:6px 4px;font-size:11px;border-radius:9px;background:#24404bee;border-color:#c7b48170}
/* ---- World map (Ragnarok-style grid of map pictures) ---- */
#world-map-window.atlas-window{width:min(1040px,96vw);max-height:calc(100dvh - 60px)}
.atlas-hint{display:block;color:#ffb07a;margin:8px 0 0;font-size:12px}.atlas-hint[hidden]{display:none}
.atlas-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;margin-top:12px;align-items:start}
.atlas-grid{display:grid;gap:0;padding:12px;border-radius:12px;background:radial-gradient(circle at 50% 50%,#2c4a52,#101d22);border:1px solid #d5b57540;box-shadow:inset 0 0 40px #000a}
.atlas-tile{position:relative;aspect-ratio:1;padding:0;border-radius:8px;overflow:hidden;border:2px solid #0d1a1d;background:#20343a;box-shadow:0 3px 10px #0008;transition:transform .12s,box-shadow .12s;min-width:0}
.atlas-tile:hover{transform:translateY(-2px) scale(1.04);z-index:2;border-color:var(--gold)}
.atlas-thumb{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:auto}
.atlas-label{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 4px;background:linear-gradient(transparent,#000c);display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}
.atlas-label b{font-size:clamp(7px,1vw,10px);letter-spacing:.3px;color:#fff3cf;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.atlas-label small{font-size:clamp(6px,.85vw,9px);color:#b8e0d8}
.atlas-here,.atlas-target{position:absolute;top:3px;font-size:14px;display:none;filter:drop-shadow(0 1px 2px #000)}
.atlas-here{left:4px}.atlas-target{right:4px}
.atlas-tile.current{border-color:#fff}.atlas-tile.current .atlas-here{display:block;animation:atlasBob 1.2s ease-in-out infinite}
.atlas-tile.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 18px #d5b57588}
.atlas-tile.hunt{box-shadow:0 0 0 2px #ff7a4a,0 0 20px #ff7a4aaa}.atlas-tile.hunt .atlas-target{display:block}
@keyframes atlasBob{50%{transform:translateY(-3px)}}
.atlas-link{align-self:center;justify-self:center;background:#d5b575aa;border-radius:3px;box-shadow:0 0 6px #d5b57566}
.atlas-link.h{width:100%;height:5px}.atlas-link.v{height:100%;width:5px;min-height:10px}
.atlas-detail{padding:14px;border:1px solid #ffffff1a;border-radius:10px;background:#ffffff06}.atlas-detail[hidden]{display:none}
.atlas-detail h3{font:22px Georgia;margin:0 0 4px;color:#fff3cf}.atlas-detail p{margin:0 0 6px}
#world-map-here{display:block;margin-bottom:6px;color:var(--gold)}#world-map-here[hidden]{display:none}
.atlas-mobs{display:flex;flex-direction:column;gap:5px;max-height:min(42vh,360px);overflow-y:auto}
.atlas-mob{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:6px;text-align:left;padding:7px 9px;font-size:12px;border-radius:8px}
.atlas-mob .mdb-el{grid-row:span 2;align-self:center}.atlas-mob small{color:#9cabb3;font-size:10px}.atlas-mob.boss b{color:#ffd363}
.atlas-actions{display:grid;gap:6px;margin-top:12px}.atlas-actions button[hidden]{display:none}
@media(max-width:760px){.atlas-layout{grid-template-columns:1fr}.atlas-grid{padding:6px}.atlas-label b{font-size:6.5px}.atlas-label small{display:none}}
/* ---- Monster search ---- */
#monster-db-window.mdb-window{width:min(980px,96vw);max-height:calc(100dvh - 60px)}
.mdb-filters{display:grid;grid-template-columns:1fr 220px auto;gap:8px;margin-top:12px;align-items:center}
.mdb-filters input,.mdb-filters select{width:100%;box-sizing:border-box;padding:9px 10px;border-radius:9px;background:#0e232c;border:1px solid #d5b57540;color:var(--ink);font-size:13px}
.mdb-level{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gold);white-space:nowrap}.mdb-level input{width:62px}
.mdb-ranges,.mdb-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.mdb-ranges button,.mdb-chip{padding:5px 11px;font-size:11px;border-radius:99px}
.mdb-chip.selected{border-color:var(--gold);background:#d5b57533;color:#fff3cf}
.mdb-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;margin-top:12px;align-items:start}
.mdb-list{display:flex;flex-direction:column;gap:4px;max-height:min(56vh,520px);overflow-y:auto;margin-top:4px;padding-right:4px}
.mdb-row{display:grid;grid-template-columns:24px 1fr;column-gap:6px;text-align:left;padding:7px 10px;border-radius:8px;font-size:12.5px}
.mdb-row .mdb-el{grid-row:span 2;align-self:center;font-size:15px}.mdb-row small{color:#9cabb3;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdb-row.selected{border-color:var(--gold);background:#d5b57522}.mdb-row.boss{background:#ffd36310}
.mdb-detail{padding:14px;border:1px solid #ffffff1a;border-radius:10px;background:#ffffff06;max-height:min(60vh,560px);overflow-y:auto}
.mdb-head h3{font:22px Georgia;margin:0 0 6px;color:#fff3cf}
.mdb-tags{display:flex;flex-wrap:wrap;gap:5px}
.mdb-tag{font-size:10.5px;padding:3px 8px;border-radius:99px;border:1px solid #ffffff30;color:#d8e2dc}.mdb-tag.boss{border-color:#ffd363;color:#ffd363}
.mdb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 6px}
.mdb-stats div{background:#0e232c99;border:1px solid #ffffff14;border-radius:8px;padding:6px 8px;display:flex;flex-direction:column}
.mdb-stats small{font-size:9px;letter-spacing:1px;color:var(--gold)}.mdb-stats b{font-size:13px}
.mdb-elinfo{font-size:11.5px;color:#ffcf9a;margin:6px 0 0}
.mdb-maps{display:flex;flex-wrap:wrap;gap:5px}.mdb-chip.map-open{border-color:#ff7a4a88;color:#ffb07a}
.mdb-drops{display:flex;flex-direction:column;gap:3px}
.mdb-drop{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:4px 8px;border-radius:7px;background:#ffffff08;font-size:12px}
.mdb-drop img{width:24px;height:24px}.mdb-drop b{color:#8de0a0;font-variant-numeric:tabular-nums}
.mdb-drop.card{background:#8f6ad522}.mdb-drop.card b{color:#d7b4ff}.mdb-drop.stone{background:#ff8a4a1a}.mdb-drop.stone b{color:#ffb07a}
@media(max-width:760px){.mdb-filters{grid-template-columns:1fr}.mdb-layout{grid-template-columns:1fr}.mdb-stats{grid-template-columns:repeat(2,1fr)}}
/* ---- Elara element crafting ---- */
#element-window.refine-modal{width:min(680px,94vw);text-align:left;background:linear-gradient(160deg,#1c2533f7,#121a26f7);border-color:#8f7fe060;box-shadow:0 40px 100px #0009,0 0 70px #7a6aff18;max-height:92dvh;overflow-y:auto;overflow-x:hidden}
.element-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.element-choice{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--el) 45%,transparent);background:color-mix(in srgb,var(--el) 10%,transparent)}
.element-choice-icon{font-size:22px}.element-choice b{font-size:12px;color:var(--el)}.element-choice small{font-size:9.5px;color:#9cabb3}
.element-choice.selected{background:color-mix(in srgb,var(--el) 30%,transparent);border-color:var(--el);box-shadow:0 0 14px color-mix(in srgb,var(--el) 60%,transparent)}
.element-choice.current::after{content:'ธาตุปัจจุบัน';font-size:8.5px;color:var(--el)}
.element-choice:disabled{opacity:.45}
#element-confirm{margin-top:10px;padding:13px}
#element-items .bag-item.worn{outline:1px dashed #8de0a0}
.item-tip-element{font-weight:700;margin:4px 0}
/* ---- System announcement (under the locked-target card) ---- */
#announce-banner{position:fixed;left:50%;top:150px;transform:translate(-50%,-8px);z-index:6;display:flex;align-items:center;gap:10px;max-width:min(560px,92vw);padding:9px 12px 9px 14px;border-radius:12px;background:linear-gradient(135deg,#2a2412f2,#1a2530f2);border:1px solid #d5b57588;box-shadow:0 10px 30px #0008,0 0 24px #d5b57522;color:#f6ecd0;font-size:12.5px;line-height:1.5;opacity:0;transition:opacity .35s,transform .35s;pointer-events:auto}
#announce-banner.show{opacity:1;transform:translate(-50%,0)}#announce-banner[hidden]{display:none}
#announce-banner .announce-icon{font-size:18px;animation:announcePulse 1.6s ease-in-out infinite}
#announce-close{border:0;padding:0 4px;font-size:16px;color:#d5b575;background:none;line-height:1}
@keyframes announcePulse{50%{transform:scale(1.18) rotate(-8deg)}}
@media(max-width:700px){#announce-banner{font-size:11px;padding:7px 10px}}
/* ---- Redeem code window ---- */
.redeem-window{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#040a0dcc;backdrop-filter:blur(3px);padding:16px;box-sizing:border-box}
.redeem-window[hidden]{display:none}
.redeem-card{position:relative;width:min(400px,100%);box-sizing:border-box;padding:30px 26px 22px;border-radius:20px;text-align:center;overflow:hidden;background:linear-gradient(170deg,#243a3c,#131f26 60%);border:1px solid #d5b57566;box-shadow:0 30px 80px #000c,inset 0 1px 0 #ffffff14;animation:redeemIn .28s ease-out}
.redeem-card *{box-sizing:border-box}
@keyframes redeemIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.redeem-glow{position:absolute;left:50%;top:-80px;width:320px;height:220px;transform:translateX(-50%);background:radial-gradient(closest-side,#d5b57555,transparent);pointer-events:none}
.redeem-close{position:absolute;top:12px;right:12px;width:30px;height:30px;padding:0;border-radius:50%;font-size:17px;line-height:1;border:0;color:#ff9a9a;background:#ff4d4d1a}
.redeem-close:hover{background:#ff4d4d;color:#fff}
.redeem-gift{position:relative;font-size:58px;line-height:1;filter:drop-shadow(0 8px 16px #d5b57566);animation:redeemFloat 2.4s ease-in-out infinite}
@keyframes redeemFloat{50%{transform:translateY(-6px) rotate(-4deg)}}
.redeem-eyebrow{display:block;margin-top:12px;font-size:10px;letter-spacing:3px;color:var(--gold)}
.redeem-title{position:relative;margin:4px 0 6px;font-size:26px}
.redeem-lead{margin:0 0 18px;font-size:13px;color:#c2d0ca;line-height:1.6}
.redeem-form{display:flex;flex-direction:column;gap:10px}
.redeem-input{display:flex;align-items:center;gap:8px;height:50px;padding:0 14px;border-radius:12px;border:1.5px solid #d5b57560;background:#0b171c;transition:border-color .2s,box-shadow .2s}
.redeem-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px #d5b57526}
.redeem-input span{font-size:16px;opacity:.8}
.redeem-input input{flex:1;min-width:0;width:auto;height:100%;margin:0;padding:0;border:0;background:none;outline:none;color:#fff;font:700 17px/1 Manrope,sans-serif;letter-spacing:2.5px;text-align:center;text-transform:uppercase}
.redeem-input input::placeholder{letter-spacing:0;text-transform:none;font-weight:500;color:#6f8a86;font-size:14px}
.redeem-submit{height:48px;border-radius:12px;font-size:14px;letter-spacing:.5px}
.redeem-result{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:700;line-height:1.5}
.redeem-result[hidden]{display:none}.redeem-result.ok{background:#8de0a01a;border:1px solid #8de0a066;color:#aef0c0}.redeem-result.bad{background:#f2a8931a;border:1px solid #f2a89366;color:#f7c0b0}
.redeem-note{display:block;margin-top:14px;font-size:11px;color:#8fa19a}
/* ---- Guild window ---- */
#guild-window.guild-window{width:min(720px,95vw)}
.guild-hero{--gc:#d5b575;position:relative;display:flex;gap:18px;align-items:center;padding:18px;border-radius:16px;overflow:hidden;background:linear-gradient(120deg,color-mix(in srgb,var(--gc) 26%,#101c22),#101c22 70%);border:1px solid color-mix(in srgb,var(--gc) 45%,transparent);box-shadow:inset 0 1px 0 #ffffff12}
.guild-hero::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gc) 30%,transparent),transparent);pointer-events:none}
.guild-emblem{--gc:#d5b575;flex-shrink:0;display:grid;place-items:center;clip-path:polygon(50% 0,100% 16%,100% 58%,50% 100%,0 58%,0 16%);background:linear-gradient(160deg,color-mix(in srgb,var(--gc) 90%,#fff),color-mix(in srgb,var(--gc) 60%,#000));box-shadow:0 0 0 2px #0006}
.guild-emblem span{filter:drop-shadow(0 2px 2px #0008)}
.guild-emblem.xl{width:84px;height:96px;font-size:40px}.guild-emblem.lg{width:48px;height:56px;font-size:24px}
.guild-hero-text{flex:1;min-width:0;position:relative;z-index:1}
.guild-eyebrow{display:block;font-size:10px;letter-spacing:1.5px;color:color-mix(in srgb,var(--gc) 70%,#fff)}
.guild-name{margin:2px 0 8px;font:28px Georgia;color:#fff6dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guild-sub{margin:0;font-size:12px;color:#c9d6d0;line-height:1.6}
.guild-stats{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.guild-stat{padding:7px 10px;border-radius:10px;background:#0009;border:1px solid #ffffff14;display:flex;flex-direction:column;gap:2px}
.guild-stat small{font-size:9px;letter-spacing:1px;color:#aebdb8}.guild-stat b{font-size:14px}
.guild-bar{height:5px;border-radius:9px;background:#ffffff14;overflow:hidden}.guild-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gc),#fff8)}
.guild-tabs{display:flex;gap:6px;margin:14px 0 10px;padding:4px;border-radius:12px;background:#0006}
.guild-tabs button{flex:1;padding:9px;font-size:12px;border:0;border-radius:9px;background:none}
.guild-tabs button.selected{background:#d5b57530;color:#fff3cf;box-shadow:inset 0 0 0 1px #d5b57566}
.guild-tools{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.guild-tools>input{flex:1 1 160px;margin:0;border-radius:10px;padding:9px 12px}
.guild-invite{display:flex;gap:6px;flex:1 1 220px}.guild-invite input{flex:1;min-width:0;margin:0;border-radius:10px;padding:9px 12px}.guild-invite button{padding:8px 14px;border-radius:10px;white-space:nowrap;border-color:#8de0a066;color:#aef0c0}
.guild-members{display:flex;flex-direction:column;gap:5px;max-height:min(46vh,420px);overflow-y:auto;padding-right:4px}
.guild-member{position:relative;display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#ffffff07;border:1px solid #ffffff10;opacity:.72}
.guild-member.online{opacity:1;background:#ffffff0c}.guild-member.me{border-color:#d5b57555}
.guild-rank{font-size:16px;text-align:center}.guild-rank.member{color:#6f8a86}
.guild-who{min-width:0;display:flex;flex-direction:column}.guild-who b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guild-who small{font-size:10.5px;color:#9cabb3}
.guild-status{display:flex;flex-direction:column;align-items:flex-end;font-size:11px}.guild-status .dot{color:#6f8a86}.guild-member.online .guild-status .dot{color:#8de0a0}.guild-status small{font-size:10px;color:#9cabb3}
.guild-more{padding:4px 10px;border-radius:8px;font-size:15px;line-height:1}
.guild-row-menu{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;padding-top:6px;border-top:1px dashed #ffffff18}
.guild-row-menu button{padding:6px 10px;font-size:11px;border-radius:8px}
.guild-notice{padding:14px 16px;border-radius:12px;background:#0006;border:1px solid #d5b57533}
.guild-notice p{margin:6px 0 0;font-size:14px;line-height:1.7;white-space:pre-wrap;color:#f0e8d0}
.guild-notice-edit{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.guild-notice-edit textarea{width:100%;box-sizing:border-box;resize:vertical;padding:10px 12px;border-radius:10px;background:#0e232c;border:1px solid #d5b57540;color:var(--ink);font:13px/1.6 inherit}
.guild-label{font-size:10px;letter-spacing:2px;color:var(--gold);margin:14px 0 8px}
.guild-form{margin-top:4px}
.guild-field{display:block;margin-top:14px}.guild-field>span{display:block;font-size:10px;letter-spacing:2px;color:var(--gold);margin-bottom:6px}
.guild-input-wrap{position:relative}.guild-input-wrap input{margin:0;border-radius:10px;padding:12px 56px 12px 14px;font-size:15px}
.guild-counter{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:#7f948f}
.guild-icons{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.guild-icon{aspect-ratio:1;padding:0;font-size:20px;border-radius:10px}.guild-icon.selected{border-color:var(--gold);background:#d5b57533;box-shadow:0 0 12px #d5b57555}
.guild-colors{display:flex;gap:8px;flex-wrap:wrap}
.guild-color{width:34px;height:34px;padding:0;border-radius:50%;background:var(--sw);border:2px solid #0008}.guild-color:hover{background:var(--sw)}.guild-color.selected{box-shadow:0 0 0 3px #fff,0 0 14px var(--sw)}
.guild-cost{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;margin:16px 0 10px;padding:12px 14px;border-radius:12px;background:#8de0a012;border:1px solid #8de0a044}
.guild-cost span{font-size:11px;color:#aebdb8}.guild-cost b{font-size:17px;color:#f6e3a8;text-align:right}.guild-cost small{grid-column:1/-1;font-size:11px;color:#8de0a0}
.guild-cost.short{background:#f2a89312;border-color:#f2a89344}.guild-cost.short small{color:#f2a893}
.guild-create-btn{padding:14px;font-size:14px;border-radius:12px}
.guild-card{padding:12px 14px;border-radius:12px;background:#ffffff07;border:1px solid #ffffff12;margin-bottom:10px}
.danger-zone{border-color:#f2a89344}.danger-zone>button{width:100%}
.guild-disband{display:flex;gap:6px;margin-top:8px}.guild-disband input{flex:1;min-width:0;margin:0;border-radius:10px}
@media(max-width:600px){.guild-hero{flex-direction:column;text-align:center}.guild-stats{grid-template-columns:1fr 1fr}.guild-stat.wide{grid-column:1/-1}.guild-icons{grid-template-columns:repeat(4,1fr)}.guild-member{grid-template-columns:24px 1fr auto}.guild-status{display:none}}
/* ---- Monster search: size ---- */
.mdb-sizeinfo{font-size:11.5px;margin:6px 0 0;color:#aef0c0}.mdb-sizeinfo.weak{color:#f2a893}
.item-tip-size{display:block;color:#b8e0d8;margin-top:4px}
/* ---- Account linking (settings) & party share tags ---- */
.account-settings .account-status{margin:6px 0 10px;font-size:12px;color:#d9e4df}
.link-row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 10px;align-items:center;padding:9px 10px;margin-bottom:6px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff14}
.link-name{font-size:13px;font-weight:700}.link-name .g{color:#4285f4;margin-right:4px}.discord-name{color:#9aa4ff}
.link-state{font-size:11px;color:#9cabb3;text-align:right}.link-state.on{color:#8de0a0;font-weight:700}
.link-action{grid-column:1/-1}.link-action:empty{display:none}
.link-discord-btn{width:100%;padding:8px;font-size:12px;border-radius:9px;background:#5865f2;border-color:#8891f7;color:#fff}.link-discord-btn[hidden]{display:none}
.link-google-off{width:100%;padding:8px;font-size:12px;border-radius:9px}
.party-share-note{display:block;margin:-2px 0 8px}
.party-share-tag{margin-left:6px;padding:1px 7px;border-radius:99px;font-size:9.5px;border:1px solid #f2a89366;color:#f2a893}.party-share-tag.on{border-color:#8de0a066;color:#8de0a0}

/* Landing on desktop: one screen, no scrollbar. The login card grows sideways — sign-in providers on the left,
   a vertical OR, Guest on the right — instead of stacking everything down the page. */
@media(min-width:701px) and (min-height:521px){
 body:not(.playing) #welcome{top:clamp(80px,14vh,190px)!important;bottom:auto!important;left:7%;width:auto;max-width:min(860px,86vw);max-height:none;overflow:visible;padding-right:0}
 body:not(.playing) #welcome h1{font-size:clamp(42px,8vh,76px);margin:0 0 clamp(8px,2vh,22px)}
 body:not(.playing) .login-card{width:min(760px,86vw);margin-top:clamp(12px,2.4vh,22px);padding:18px 22px;display:grid;grid-template-columns:1fr 40px 1fr;column-gap:14px;row-gap:10px;align-items:center}
 body:not(.playing) .login-card .card-title,body:not(.playing) .login-card .login-lead,body:not(.playing) #auth-error,body:not(.playing) #local-dev-divider,body:not(.playing) #preview{grid-column:1/-1;margin:0}
 body:not(.playing) #google-live,body:not(.playing) #google{grid-area:3/1;margin:0}
 body:not(.playing) #discord-login{grid-area:4/1}
 body:not(.playing) .login-card .provider,body:not(.playing) #guest-login{width:100%;margin:0;min-height:46px}
 body:not(.playing) .login-card>.divider:not(#local-dev-divider){grid-area:3/2/5/3;align-self:stretch;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:9px}
 body:not(.playing) .login-card>.divider:not(#local-dev-divider)::before,body:not(.playing) .login-card>.divider:not(#local-dev-divider)::after{content:'';flex:1;width:1px;background:linear-gradient(transparent,#d5b57560,transparent)}
 body:not(.playing) #guest-login{grid-area:3/3}
 body:not(.playing) .guest-note{grid-area:4/3;margin:0;text-align:left;align-self:center}
 body:not(.playing) .features{margin-top:clamp(12px,2.4vh,22px)}
}

/* ---- Guild: start screen (find / create), search results, flags, join requests, guild skills ---- */
.guild-start-head{text-align:center;margin:4px 0 14px}.guild-start-head h3{margin:0 0 4px;font:600 20px 'Cinzel',Georgia,serif;color:#f3e3b8}.guild-start-head p{margin:0;color:#9fb3ad;font-size:12px}
.guild-start{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.guild-choice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 18px 20px;border-radius:16px;border:1px solid #ffffff1c;background:linear-gradient(160deg,#ffffff0d,#ffffff03);min-height:210px}
.guild-choice.find{--c:#4a9ae0}.guild-choice.create{--c:#d5b575}
.guild-choice:hover{border-color:var(--c);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,transparent),#ffffff05);transform:translateY(-2px);box-shadow:0 10px 26px #0005}
.guild-choice .gc-icon{font-size:40px;width:74px;height:74px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,#0c181d);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent)}
.guild-choice b{font-size:17px;color:#fff3cf}.guild-choice small{font-size:11.5px;color:#a9bbb5;line-height:1.55}
.guild-choice .gc-cta{margin-top:auto;padding:7px 18px;border-radius:20px;font-size:12px;font-weight:700;color:#10201f;background:var(--c)}
.guild-back{display:flex;align-items:center;gap:12px;margin-bottom:12px}.guild-back button{padding:7px 12px;font-size:12px}.guild-back b{font-size:14px;color:#f3e3b8}
.guild-results{display:flex;flex-direction:column;gap:6px;max-height:min(50vh,440px);overflow-y:auto;padding-right:4px}
.guild-result{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#ffffff08;border:1px solid color-mix(in srgb,var(--gc) 30%,#ffffff10)}
.guild-result>button{padding:9px 14px;font-size:12px;width:auto;white-space:nowrap}
.guild-result .guild-who b{display:flex;align-items:center;gap:6px}
.guild-result-notice{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;opacity:.75}
.guild-emblem.md{width:40px;height:46px;font-size:20px}
.guild-empty{text-align:center;color:#8fa5a0;padding:26px 10px;margin:0}
.guild-hint{display:block;font-size:10.5px;color:#7f948f;margin-top:5px}
.guild-flag{display:inline-block;flex-shrink:0;width:24px;height:16px;border-radius:2px;box-shadow:0 0 0 1px #0007;vertical-align:-2px}
.guild-flag.flag-th{background:linear-gradient(#a51931 0 16.66%,#f4f5f8 0 33.33%,#2d2a4a 0 66.66%,#f4f5f8 0 83.33%,#a51931 0)}
.guild-name .guild-flag{width:30px;height:20px;margin-right:4px;vertical-align:-1px}
.guild-flags{display:flex;gap:8px;flex-wrap:wrap}
.guild-flag-pick{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:10px}
.guild-flag-pick.selected{border-color:var(--gold);background:#d5b57533;box-shadow:0 0 12px #d5b57555}
.guild-icons{grid-template-columns:repeat(10,1fr)}
.guild-tabs{flex-wrap:wrap}.guild-tabs button.has-badge{color:#ffd88a}
.guild-request{grid-template-columns:28px 1fr auto}
.guild-request-actions{display:flex;gap:6px}.guild-request-actions button{padding:7px 12px;font-size:12px;width:auto}
.guild-points{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:linear-gradient(90deg,#d5b57522,#ffffff05);border:1px solid #d5b57540;margin-bottom:12px}
.guild-points span{font-size:11px;letter-spacing:1.5px;color:var(--gold)}.guild-points b{font-size:20px;color:#fff3cf}.guild-points small{font-size:11px;color:#9fb3ad;text-align:right}
.guild-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:10px}
.guild-skill{display:flex;flex-direction:column;gap:9px;padding:13px;border-radius:12px;background:#ffffff07;border:1px solid #ffffff12}
.guild-skill.active{border-color:#d5b57560;background:linear-gradient(160deg,#d5b5751a,#ffffff05)}
.gs-top{display:flex;gap:10px;align-items:center}.gs-top b{display:block;font-size:13px}.gs-top small{font-size:11px;color:#9fb3ad}
.gs-icon{font-size:24px;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#0006}
.gs-pips{display:flex;gap:4px}.gs-pips i{flex:1;height:6px;border-radius:3px;background:#ffffff18}.gs-pips i.on{background:linear-gradient(90deg,#e8c77f,#d5a445);box-shadow:0 0 6px #d5b57588}
.gs-effect{font-size:11.5px;color:#cfe0d8}.guild-skill button{padding:8px;font-size:12px}
@media(max-width:560px){.guild-start{grid-template-columns:1fr}.guild-choice{min-height:0;padding:18px}.guild-icons{grid-template-columns:repeat(5,1fr)}.guild-result{grid-template-columns:auto 1fr}.guild-result>button{grid-column:1/-1}.guild-result-notice{max-width:200px}.guild-points{grid-template-columns:auto 1fr}.guild-points small{grid-column:1/-1;text-align:left}}

/* ---- Buff bar (right of the character card) ---- */
#buff-bar{position:fixed;top:92px;left:310px;display:flex;flex-wrap:wrap;gap:6px;max-width:260px;z-index:6}
.buff{--pct:1;position:relative;display:flex;align-items:center;gap:5px;padding:3px 9px 3px 3px;border-radius:16px;background:#0f1f27e6;border:1px solid #8fe0c066;box-shadow:0 3px 10px #0005;cursor:help;outline:none}
.buff-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:radial-gradient(circle at center,#17313a 58%,transparent 60%),conic-gradient(#8fe0c0 calc(var(--pct)*1turn),#ffffff1a 0)}
.buff-time{font:700 11px Manrope,sans-serif;color:#dff6ee;font-variant-numeric:tabular-nums}
.buff.ending{border-color:#f0b35a99}.buff.ending .buff-time{color:#ffd28a;animation:buffBlink 1s steps(2) infinite}
@keyframes buffBlink{50%{opacity:.45}}
.buff-tip{display:none;position:absolute;top:calc(100% + 8px);left:0;width:210px;padding:10px 12px;border-radius:10px;background:#0c1a20f5;border:1px solid #d5b57566;box-shadow:0 8px 24px #0008;z-index:40;pointer-events:none}
.buff:hover .buff-tip,.buff:focus .buff-tip{display:block}
.buff-tip b{display:block;font-size:12.5px;color:#fff0c8;margin-bottom:4px}.buff-tip p{margin:3px 0 0;font-size:11px;color:#bcd2cb;line-height:1.45}.buff-tip .buff-desc{color:#9ff0c8;font-weight:700}
.unequip-btn{border-color:#e0806066;color:#ffc9b8}
@media(max-width:700px){#buff-bar{max-width:140px}.buff{padding:2px 7px 2px 2px}.buff-icon{width:22px;height:22px;font-size:13px}}

/* ---- Auto Hunt panel (clean card layout) ---- */
.bot-panel{padding:16px 18px!important}
.bot-panel .window-title small{font-size:9px;letter-spacing:2.5px;color:var(--gold)}.bot-panel .window-title h2{margin:2px 0 0}
.bot-card{background:#ffffff07;border:1px solid #ffffff14;border-radius:14px;padding:12px 14px;margin:10px 0}
.bot-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.bc-title{font-size:13px;font-weight:700;color:#f3e6c4;display:flex;align-items:center;gap:6px}.bc-title em{font-style:normal;font-size:11px;font-weight:600;color:#8fd8b8;background:#8fd8b81a;border-radius:10px;padding:1px 8px}
.bot-card>small.muted{display:block;font-size:10.5px;margin-top:6px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;cursor:pointer}
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto}.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:11px;background:#ffffff1c;transition:.2s}.switch i::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#dfe6e3;transition:.2s}
.switch input:checked+i{background:#5fbf95}.switch input:checked+i::after{left:19px;background:#fff}.switch input:focus-visible+i{outline:2px solid var(--gold)}
.bot-chips{display:flex;flex-wrap:wrap;gap:6px}.chip{position:relative;cursor:pointer}.chip input{position:absolute;opacity:0}.chip span{display:inline-block;padding:5px 12px;border-radius:14px;border:1px solid #ffffff22;font-size:11.5px;color:#9fb3ad;transition:.15s}
.chip input:checked+span{background:#5fbf9526;border-color:#5fbf9588;color:#dff6ea}.chip input:focus-visible+span{outline:2px solid var(--gold)}
.bot-card:has(#bot-loot:not(:checked)) .bot-chips{opacity:.4;pointer-events:none}
.bot-mon-actions{display:flex;gap:6px}.bot-mon-actions button{padding:5px 10px;font-size:11px;border-radius:8px}#bot-select-all{border-color:#5fbf9577;color:#bff0da}
#bot-monsters{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;margin:4px 0;max-height:230px;overflow-y:auto;padding-right:2px}
.bot-mon{position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#0b1a2099;border:1px solid #ffffff12;cursor:pointer;transition:.15s;font-size:12px}
.bot-mon:hover{border-color:#ffffff30}.bot-mon input{position:absolute;opacity:0;pointer-events:none}
.bm-check{width:16px;height:16px;border-radius:5px;border:1.5px solid #ffffff40;flex:0 0 auto;display:grid;place-items:center;font-size:11px;color:#0c1a1f;transition:.15s}
.bot-mon:has(input:checked){background:#5fbf9518;border-color:#5fbf9566}.bot-mon:has(input:checked) .bm-check{background:#5fbf95;border-color:#5fbf95}.bot-mon:has(input:checked) .bm-check::after{content:'✓';font-weight:900}
.bot-mon:has(input:focus-visible){outline:2px solid var(--gold)}
.bm-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e6ece9}.bm-lv{font-size:11px;flex:0 0 auto}
.bot-mon.boss .bm-name{color:#ffd27a}.bot-empty{grid-column:1/-1;color:#8fa5a0;font-size:12px;margin:6px 0}
.bot-panel .bot-potion-row{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:8px;margin:8px 0}
.bot-panel .bot-potion-row .switch-row{width:auto;gap:8px}.pot-when{font-size:11px;color:#9fb3ad}
.pot-tag{font-size:10px;padding:2px 7px;border-radius:6px;letter-spacing:.5px}.pot-tag.hp{background:#e0604e33;color:#ffb2a6}.pot-tag.sp{background:#4a9ae033;color:#a8d0ff}
#bot-start{width:100%;margin-top:6px;padding:13px;font-size:13px;letter-spacing:1px}
@media(max-width:560px){#bot-monsters{grid-template-columns:1fr 1fr}.bot-panel .bot-potion-row{grid-template-columns:auto 1fr auto auto}.pot-when{display:none}}
#bot-monsters{overflow-x:hidden}.bot-panel label,.bot-panel .bc-title,.bot-panel .bm-name,.bot-panel .chip span{letter-spacing:0!important;text-transform:none}
.bot-panel .bm-name{font-size:12.5px!important}.bot-panel .bm-lv{font-size:11.5px!important}

/* Costume slots (Ragnarok-style): upper / middle / lower headgear on row 6, garment on row 7. */
/* Equipment 3x5 cross + a separate costume column on the right (upper / middle / lower headgear, garment). */
#equipment-slots{grid-template-columns:repeat(3,1fr) 1.05fr!important;grid-template-rows:repeat(5,minmax(46px,64px))!important}
.slot-costumeHead{grid-area:1/4/2/5!important}.slot-costumeMid{grid-area:2/4/3/5!important}.slot-costumeLow{grid-area:3/4/4/5!important}.slot-costumeBack{grid-area:4/4/5/5!important}
.slot-costumeHead,.slot-costumeMid,.slot-costumeLow,.slot-costumeBack{border-color:#b98fd0!important;margin-left:6px;background:linear-gradient(135deg,#34284a,#1a1628)!important}
.paperdoll::after{content:'COSTUME';position:absolute;top:4px;right:6px;font-size:9px;letter-spacing:2px;color:#c9a6e0}
@media(min-width:701px){#inventory.game-window{width:min(940px,96vw)!important;height:auto!important;max-height:calc(100dvh - 40px)!important}.inventory-layout{grid-template-columns:330px minmax(0,1fr)!important}.paperdoll{width:auto!important}}
@media(max-width:700px){.inventory-layout{grid-template-columns:minmax(0,1fr)!important}#inventory.game-window{width:94vw!important;box-sizing:border-box}#equipment-slots{grid-template-columns:repeat(4,minmax(0,1fr))!important}.paperdoll{width:min(330px,100%)!important;margin:auto}#inventory.game-window{height:auto!important;max-height:calc(100dvh - 24px)!important}}

/* ---- Level ranking window ---- */
.ranking-window{width:min(720px,94vw)!important}
.rk-sub{margin:-4px 0 14px;font-size:11px;color:#9fb3ad;text-align:center}
.rk-podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:12px;margin-bottom:16px}
.rk-pod{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:14px 10px 0;border-radius:16px 16px 6px 6px;background:linear-gradient(180deg,#ffffff0d,#ffffff03);border:1px solid #ffffff14;min-width:0}
.rk-pod.empty{visibility:hidden}.rk-pod.me{box-shadow:0 0 0 2px #8fe0c0aa}
.rk-pod.p1{--mc:#ffd45a;background:linear-gradient(180deg,#ffd45a26,#ffffff04);border-color:#ffd45a66;padding-top:20px}.rk-pod.p2{--mc:#d6dde6;background:linear-gradient(180deg,#d6dde61f,#ffffff04);border-color:#d6dde655}.rk-pod.p3{--mc:#e0985a;background:linear-gradient(180deg,#e0985a22,#ffffff04);border-color:#e0985a55}
.rk-crown{height:18px;font-size:20px;line-height:18px;filter:drop-shadow(0 0 6px #ffd45a)}
.rk-avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:radial-gradient(circle at 35% 30%,#2e4a58,#122028);box-shadow:0 0 0 3px var(--mc),0 0 18px color-mix(in srgb,var(--mc) 45%,transparent)}
.rk-pod.p1 .rk-avatar{width:68px;height:68px;font-size:32px}
.rk-medal{font-size:20px;margin-top:-12px}
.rk-name{font-size:14px;color:#fff3d4;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rk-pod.p1 .rk-name{font-size:16px}
.rk-cls{font-size:10.5px;color:#9fb3ad}
.rk-lv{display:flex;gap:6px;align-items:baseline;margin:2px 0}.rk-lv span{font:800 17px Manrope,sans-serif;color:var(--mc)}.rk-lv em{font-style:normal;font-size:11px;color:#cfe0d8}
.rk-guild{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;padding:1px 8px;border-radius:9px;color:color-mix(in srgb,var(--gc) 80%,#fff);background:color-mix(in srgb,var(--gc) 16%,transparent);border:1px solid color-mix(in srgb,var(--gc) 40%,transparent)}
.rk-stand{align-self:stretch;margin-top:8px;padding:8px 0;border-radius:6px 6px 0 0;font:800 18px Manrope,sans-serif;color:#10201f;background:linear-gradient(180deg,var(--mc),color-mix(in srgb,var(--mc) 60%,#000))}
.rk-pod.p1 .rk-stand{padding:18px 0}.rk-pod.p2 .rk-stand{padding:11px 0}
.rk-list{display:flex;flex-direction:column;gap:3px;max-height:min(42vh,420px);overflow-y:auto;padding-right:4px}
.rk-row{display:grid;grid-template-columns:48px minmax(0,1fr) 120px 72px 44px;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:#ffffff06;font-size:12px}
.rk-row.rk-head{background:none;font-size:10px;letter-spacing:1.5px;color:var(--gold);padding-top:0}
.rk-row.me{background:#8fe0c01c;box-shadow:inset 0 0 0 1px #8fe0c066}
.rk-rank{font:800 12px Manrope,sans-serif;color:#b8c8c2}.rk-who{display:flex;align-items:center;gap:6px;min-width:0}.rk-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eef3f0}
.rk-dot{width:7px;height:7px;border-radius:50%;background:#ffffff26;flex:0 0 auto}.rk-dot.on{background:#6ee0a0;box-shadow:0 0 6px #6ee0a0}
.rk-cl{color:#a9bdb6;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rk-lvcell{display:flex;flex-direction:column;line-height:1.2}.rk-lvcell b{color:#ffe6a8}.rk-lvcell small{font-size:9.5px;color:#8fa5a0}.rk-job{color:#cfe0d8;text-align:center}
.rk-mine{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,#8fe0c022,#ffffff05);border:1px solid #8fe0c055}.rk-mine span{font-size:11px;color:#9fe0c8;letter-spacing:1px}.rk-mine b{font:800 20px Manrope,sans-serif;color:#fff}.rk-mine small{font-size:11px;color:#bcd2cb}
.rk-empty{text-align:center;color:#8fa5a0;font-size:12px;margin:10px 0}
@media(max-width:560px){.rk-podium{gap:6px}.rk-avatar{width:44px;height:44px;font-size:20px}.rk-pod.p1 .rk-avatar{width:52px;height:52px}.rk-row{grid-template-columns:36px minmax(0,1fr) 62px 36px}.rk-cl{display:none}.rk-row.rk-head span:nth-child(3){display:none}}

/* ---- Welcome tutorial ---- */
.tutorial-window{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0c1a1fcc,#060d10ee);backdrop-filter:blur(3px);padding:16px}
.tut-card{position:relative;width:min(460px,94vw);padding:28px 26px 22px;border-radius:20px;text-align:center;background:linear-gradient(170deg,#1c3038,#101d23);border:1px solid #d5b57566;box-shadow:0 30px 80px #000a,inset 0 1px 0 #ffffff14;animation:tutIn .35s ease-out}
@keyframes tutIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.tut-hero{width:84px;height:84px;margin:-4px auto 10px;border-radius:50%;display:grid;place-items:center;font-size:40px;background:radial-gradient(circle at 35% 30%,#d5b57555,#1a2c33 70%);box-shadow:0 0 0 2px #d5b57588,0 0 30px #d5b57544}
.tut-hero.small{width:64px;height:64px;font-size:30px}
.tut-eyebrow{display:block;font-size:10px;letter-spacing:3px;color:var(--gold);margin-bottom:4px}
.tut-title{margin:0 0 10px;font:600 24px 'Cinzel',Georgia,serif;color:#fff3cf}
.tut-lead{margin:0 0 18px;color:#c3d4ce;font-size:13.5px;line-height:1.7}
.tut-list{list-style:none;margin:6px 0 14px;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
.tut-list li{position:relative;padding:10px 12px 10px 34px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff12;font-size:13px;line-height:1.55;color:#dbe6e1}
.tut-list li::before{content:'✦';position:absolute;left:12px;top:10px;color:var(--gold)}
.tut-list b{color:#ffe6a8;background:#d5b5751f;padding:0 5px;border-radius:4px}
.tut-dots{display:flex;justify-content:center;gap:6px;margin:4px 0 16px}.tut-dots i{width:7px;height:7px;border-radius:50%;background:#ffffff26}.tut-dots i.on{width:20px;border-radius:4px;background:var(--gold)}
.tut-actions{display:flex;gap:10px;justify-content:center}.tut-actions button{flex:1;padding:12px 14px;font-size:13px;border-radius:10px}
.tut-skip{background:#ffffff08}
.qt-tag.intro{background:#6ee0a033;color:#aef5cf}

.stat-row .job-bonus{font-size:11px;color:#8fe0b0;margin-left:3px;font-weight:700}

/* ---- Mobile: no zoom, hotbar collapse toggle, item counts on hotbar slots ---- */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%}
#hotbar.collapsed .hslot:nth-of-type(n+6){display:none}
#hotbar-toggle{flex:0 0 auto;align-self:stretch;width:22px;min-width:22px;padding:0;border-radius:8px;font:900 16px Manrope,sans-serif;color:#f3e3b8;background:#d5b57522;border:1px solid #d5b57566;cursor:pointer}
#hotbar-toggle:hover{background:#d5b57544}
.hslot{position:relative}
.hs-count{position:absolute;right:2px;bottom:1px;min-width:12px;padding:0 2px;font:800 10px/1.2 Manrope,sans-serif;color:#fff;text-align:right;text-shadow:0 0 3px #000,0 0 2px #000;pointer-events:none}
.hslot.empty img{opacity:.35;filter:grayscale(1)}.hslot.empty .hs-count{color:#ff8a80}
@media(max-width:700px){#hotbar-toggle{width:28px;min-width:28px;font-size:18px}}
#hotbar .hslot .hs-count{font-size:10px!important;line-height:1.2!important;width:auto;height:auto}

/* ---- Class skill book (S window) ---- */
.sk-group{display:flex;align-items:baseline;gap:10px;margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid #d5b57533}.sk-group b{color:var(--gold);font-size:13px}.sk-group small{color:#8fa5a0;font-size:11px}
.sk-card{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;margin-bottom:8px;border-radius:12px;background:#ffffff06;border:1px solid #ffffff12;opacity:.78}
.sk-card.learned{opacity:1;background:linear-gradient(135deg,#ffffff0c,#ffffff03);border-color:#d5b57544}
.sk-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:12px;background:#0c1a20;border:1px solid #d5b57555}.sk-icon img{width:40px;height:40px}.sk-icon[draggable=true]{cursor:grab;box-shadow:0 0 0 2px #8fe0b055}
.sk-card.passive .sk-icon{border-radius:50%}
.sk-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.sk-top strong{color:#fff3cf;font-size:14px}.sk-top small{color:#a9bdb6;font-size:11px}.sk-top em{margin-left:auto;font-style:normal;font-size:11px;color:#ffe6a8}
.sk-cost{display:block;color:#ffb27a;font-size:10.5px;margin:2px 0}
.sk-now{margin:4px 0 2px;font-size:12px;color:#dbe6e1;line-height:1.5}.sk-next{margin:0;font-size:11px;color:#8fe0b0;line-height:1.5}
.sk-pips{display:flex;gap:3px;margin-top:6px}.sk-pips i{flex:1;max-width:22px;height:4px;border-radius:2px;background:#ffffff1a}.sk-pips i.on{background:#e8c77f}
.sk-up{padding:8px 12px;font-size:12px;border-radius:9px;white-space:nowrap}
.bar.rage{height:8px;margin-top:4px;background:#2a1414}.bar.rage i{background:linear-gradient(90deg,#b8322a,#ff7a3a)}.bar.rage span{font-size:8px}
.hslot.no-res img{opacity:.4;filter:grayscale(.7)}
@media(max-width:560px){.sk-card{grid-template-columns:44px minmax(0,1fr);}.sk-up{grid-column:1/-1}}

/* ---- Skill window v2: compact one-page grid + tooltip + confirm bar ---- */
#skills.game-window{width:min(560px,94vw)!important}
.sk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sk-glabel{grid-column:1/-1;font-size:10px;letter-spacing:2px;color:var(--gold);margin-top:4px;border-bottom:1px solid #d5b57533;padding-bottom:3px}
.sk-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px 6px;border-radius:12px;background:#ffffff06;border:1px solid #ffffff12;opacity:.72}
.sk-tile.learned{opacity:1;border-color:#d5b57544}.sk-tile.pending{border-color:#8fe0b0aa;box-shadow:0 0 0 1px #8fe0b055 inset}
.sk-ic{width:48px;height:48px;padding:0;display:grid;place-items:center;border-radius:11px;background:#0c1a20;border:1px solid #d5b57555;cursor:help}.sk-ic img{width:38px;height:38px}.sk-ic[draggable=true]{cursor:grab;box-shadow:0 0 0 2px #8fe0b055}
.sk-tile.passive .sk-ic{border-radius:50%}
.sk-name{font-size:10.5px;color:#e6ece9;text-align:center;line-height:1.2;min-height:2.4em;display:flex;align-items:center}
.sk-lv{display:flex;align-items:baseline;gap:1px}.sk-lv b{font-size:14px;color:#ffe6a8}.sk-lv small{font-size:10px;color:#8fa5a0}.sk-lv em{font-style:normal;font-size:11px;color:#8fe0b0;margin-left:3px;font-weight:800}
.sk-ctrl{display:flex;align-items:center;gap:4px}.sk-ctrl button{width:24px;height:22px;padding:0;font-size:13px;border-radius:7px}.sk-ctrl .sk-lv{min-width:38px;justify-content:center}
.sk-type{position:absolute;top:3px;left:6px;font-size:8.5px;letter-spacing:.5px;color:#d5b575b0}.sk-confirm{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-radius:12px;background:#ffffff06;border:1px solid #ffffff14}.sk-confirm.on{background:#8fe0b014;border-color:#8fe0b066}
.sk-confirm span{flex:1;font-size:12px;color:#cfe0d8}.sk-confirm button{padding:8px 12px;font-size:12px;border-radius:9px}
#skills>small.muted{display:none}
#sk-tip{position:fixed;z-index:80;padding:10px 12px;border-radius:10px;background:#0c1a20f7;border:1px solid #d5b57577;box-shadow:0 10px 30px #000a;pointer-events:none}
#sk-tip b{display:block;color:#fff3cf;font-size:13px;margin-bottom:4px}#sk-tip p{margin:3px 0 0;font-size:11.5px;color:#cfe0d8;line-height:1.45}#sk-tip p.next{color:#8fe0b0}
@media(max-width:480px){.sk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Inspect another player's gear + "show my gear" toggle ---- */
#inspect-window.game-window{width:min(420px,94vw)!important;height:auto!important}
#inspect-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inspect-slot{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid #d5b57540}
.inspect-slot.empty{opacity:.5;border-color:#ffffff14}
.inspect-slot img{width:34px;height:34px;flex:none}.inspect-slot .empty-gear{width:34px;text-align:center;color:#8fa5a0}
.inspect-slot small{display:block;font-size:10px;color:#8fa5a0}.inspect-slot b{font-size:12px;color:#fff3cf}
.inspect-slot .card-holes{position:absolute;left:8px;bottom:4px}
.show-equip{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:#cfe0d8;cursor:pointer}
@media(max-width:420px){#inspect-slots{grid-template-columns:1fr}}

/* ---- Player menu (click another player): compact glass card, 2-column action grid ---- */
.npc-modal.player-menu{width:min(280px,92vw);padding:12px 12px 12px;border-radius:14px;background:linear-gradient(160deg,#1b3336f2,#0f2024f2);border:1px solid #d5b57555;box-shadow:0 14px 40px #0009;backdrop-filter:blur(6px)}
.player-menu .window-title{margin:0 0 2px;padding:0;border:0;min-height:0}
.player-menu .window-title small{font-size:9px;letter-spacing:2px;color:#d5b575aa}
.player-menu .window-title h2{font-size:16px;margin:0;line-height:1.2}
.player-menu #npc-close{width:26px;height:26px;padding:0;font-size:15px;border-radius:8px}
.player-menu #npc-lines{margin:4px 0 10px;font-size:11px;line-height:1.4;color:#a9bdb6}
.player-menu #npc-options{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.player-menu #npc-options button{text-align:center;padding:7px 6px;font-size:12px;line-height:1.2;border-radius:9px;background:#ffffff0a;border:1px solid #ffffff1c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-menu #npc-options button:hover:not(:disabled){background:#d5b57522;border-color:#d5b57588}
.player-menu #npc-options button:last-child:nth-child(odd){grid-column:1/-1}

/* ---- BOT potion rows: switch + HP/SP tag sit tight; potion slots are coloured so they stand out ---- */
.bot-panel .bot-potion-row{gap:6px}
.bot-potion-row .switch-row,.bot-panel .bot-potion-row .switch-row{justify-content:flex-start;gap:5px;width:auto}
.bot-potion-row b.pot-tag{min-width:0;text-align:center;font-size:10px;font-weight:800}
.bot-potion-row .potion-slot{padding:4px 8px 4px 5px;border:1.5px solid;border-radius:9px;opacity:1;max-width:120px}
.bot-potion-row .potion-slot-icon{width:26px;height:26px;border-radius:7px;background:#00000040}
.bot-potion-row .potion-slot small{font-size:10px;color:#f4ece0}
#bot-potion-hp-item{border-color:#ff7a66;background:linear-gradient(135deg,#e0604e38,#e0604e14);box-shadow:0 0 0 1px #ff7a6633,0 0 12px #ff5a4a33}
#bot-potion-sp-item{border-color:#5fb0ff;background:linear-gradient(135deg,#4a9ae038,#4a9ae014);box-shadow:0 0 0 1px #5fb0ff33,0 0 12px #4a9ae033}
#bot-potion-hp-item:hover,#bot-potion-hp-item.drag-over{background:#e0604e55}
#bot-potion-sp-item:hover,#bot-potion-sp-item.drag-over{background:#4a9ae055}
.bot-potion-row .potion-slot.unset{border-style:dashed;animation:potSlotPulse 1.6s ease-in-out infinite}
.bot-potion-row .potion-slot small.potion-empty{color:#ffd0a0;font-weight:700}
@keyframes potSlotPulse{50%{box-shadow:0 0 0 2px #ffffff22,0 0 16px #ffd24a55}}
@media(prefers-reduced-motion:reduce){.bot-potion-row .potion-slot.unset{animation:none}}

/* ---- BOT potion rows v2: [switch HP] [potion slot ×] [ต่ำกว่า 30%] [slider] — everything packed, only the slider stretches ---- */
.bot-panel .bot-potion-row,.bot-potion-row{display:flex!important;align-items:center;gap:8px;margin:6px 0}
.bot-potion-row .pot-when{display:inline-flex!important;align-items:baseline;gap:4px;flex:0 0 auto;white-space:nowrap}
.bot-potion-row .pot-when b{min-width:0;font-size:12px}
.bot-potion-row input[type=range]{flex:1 1 auto;min-width:60px;margin:0}
.potion-slot-wrap{position:relative;flex:0 0 auto;display:inline-flex}
.bot-potion-row .potion-slot{min-width:92px}
.potion-clear{position:absolute;top:-7px;right:-7px;width:18px;height:18px;padding:0;border-radius:50%;font-size:12px;line-height:16px;background:#2a1414;border:1px solid #ff8a7a;color:#ffd0c8;z-index:1}
.potion-clear:hover{background:#b8322a;color:#fff}
.potion-pick-clear{color:#ffb2a6!important;border-color:#ff8a7a55!important}
@media(max-width:560px){.bot-potion-row .pot-when{font-size:0}.bot-potion-row .pot-when b{font-size:12px}}
.bot-potion-row .potion-slot{width:108px;max-width:108px}

/* ---- "Let others inspect my gear" switch card (inventory, under the paperdoll) ---- */
.paperdoll .show-equip{display:flex!important;align-items:center;gap:10px;margin:10px 0 0;padding:9px 12px;border-radius:12px;background:#ffffff08;border:1px solid #d5b57540;cursor:pointer;width:auto;text-align:left}
.show-equip .se-eye{font-size:18px;line-height:1;flex:none}
.show-equip .se-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.show-equip .se-text b{font-size:12px;color:#f3e6c4;font-weight:700;letter-spacing:0}
.show-equip .se-text small{font-size:10.5px;color:#8fd8b8;letter-spacing:0}
.show-equip .switch{flex:none}
.show-equip:has(input:not(:checked)){border-color:#ffffff1a}
.show-equip:has(input:not(:checked)) .se-text small{color:#f2a893}
.show-equip:has(input:not(:checked)) .se-eye{opacity:.45;filter:grayscale(1)}

/* ---- Class resource bar (shares #rage-bar): colour per class resource ---- */
#rage-bar[data-kind=energy]{background:#2a2410}#rage-bar[data-kind=energy] i{background:linear-gradient(90deg,#c9a20a,#ffe066)}
#rage-bar[data-kind=combo]{background:#2a1a10}#rage-bar[data-kind=combo] i{background:linear-gradient(90deg,#d0701a,#ffb04a)}
#rage-bar[data-kind=res]{background:#1e1630}#rage-bar[data-kind=res] i{background:linear-gradient(90deg,#7a5ad0,#c7a8ff)}
#rage-bar[data-kind=focus]{background:#22241a}#rage-bar[data-kind=focus] i{background:linear-gradient(90deg,#a89a5a,#fff3c0)}
#rage-bar[data-kind=faith]{background:#262210}#rage-bar[data-kind=faith] i{background:linear-gradient(90deg,#c9a24a,#fff6c8)}
#rage-bar[data-kind=summon]{background:#142420}#rage-bar[data-kind=summon] i{background:linear-gradient(90deg,#4aa88a,#bdf7dd)}
#rage-bar span{letter-spacing:.5px}

/* ---- BOT skill slots ---- */
.bot-skill-slots{display:flex;gap:10px;margin:2px 0 10px}
.bot-skill-slot{position:relative;display:inline-flex}
.bot-skill-slot::after{content:attr(data-n);position:absolute;left:4px;top:2px;font-size:9px;color:#d5b575aa;pointer-events:none}
.bot-skill-btn{width:52px;height:52px;padding:0;display:grid;place-items:center;border-radius:12px;border:1.5px dashed #d5b57588;background:#d5b57510;color:#d5b575;font-size:20px;animation:potSlotPulse 1.6s ease-in-out infinite}
.bot-skill-btn img{width:38px;height:38px}
.bot-skill-btn.filled{border-style:solid;border-color:#c7a8ff;background:linear-gradient(135deg,#7a5ad038,#7a5ad014);animation:none;box-shadow:0 0 12px #7a5ad044}
.bot-skill-btn:hover,.bot-skill-btn.drag-over{background:#d5b57533}
.bot-skill-mode{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px;font-size:11.5px;color:#9fb3ad}
.bot-skill-mode>span{margin-right:2px}
@media(prefers-reduced-motion:reduce){.bot-skill-btn{animation:none}}

/* ---- Login: username/password form + social "Soon!" ---- */
.pw-form{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.pw-field{display:flex;flex-direction:column;gap:4px;text-align:left}
.pw-field span{font-size:11px;letter-spacing:.5px;color:#a9bdb6}
.pw-field input{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:10px;border:1px solid #9aaea955;background:#0c1a20cc;color:#f3ecd9;font-size:14px}
.pw-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px #d5b57533}
.pw-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pw-actions button{padding:11px 10px}
.social-soon{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.social-soon .provider{margin:0;padding:9px 10px;font-size:12.5px;opacity:.55;cursor:not-allowed;display:flex;align-items:center;justify-content:center;gap:6px}
.social-soon .provider svg{width:16px;height:16px}
.soon{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:8px;background:#d5b575;color:#1c2c34;font-size:10px;font-weight:800;letter-spacing:.3px}
.login-card .pw-field{margin:0}.login-card .pw-field input{padding:12px 14px}
.social-soon #google,.social-soon #discord-login{grid-area:auto!important;min-height:40px!important}
@media(min-width:701px) and (min-height:521px){
 body:not(.playing) .pw-form{grid-area:3/1/6/2;margin:0}
 body:not(.playing) .login-card>.divider:not(#local-dev-divider){grid-area:3/2/6/3}
 body:not(.playing) #guest-login{grid-area:3/3;align-self:end}
 body:not(.playing) .guest-note{grid-area:4/3;align-self:start}
 body:not(.playing) .social-soon{grid-area:5/3;margin:0;align-self:end}
}
.pw-form,.pw-field,.social-soon{min-width:0}.pw-actions,.social-soon{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pw-actions button,.social-soon .provider{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){body:not(.playing) .login-card{max-width:calc(100vw - 32px)}}

/* Game logo on the welcome screen: transparent PNG (black keyed out of logo_v1.png) */
#welcome h1.game-logo{font-size:0!important;line-height:0;margin:0 0 clamp(4px,1.5vh,14px)!important}
#welcome h1.game-logo img{display:block;width:min(560px,100%);height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(80,140,255,.18))}

/* Item links in chat (Shift+click an item / 'send in chat' button) */
.chat-item-link{color:#ffd479;font-weight:700;cursor:help;text-decoration:underline dotted rgba(255,212,121,.55);text-underline-offset:2px}
.chat-item-link:hover{color:#fff1c4}

/* Official GM badge (chat + character card); the in-world name plate draws its own on the canvas */
.gm-badge{display:inline-block;font:800 9px/1 Manrope,sans-serif;letter-spacing:.5px;color:#3a1f00;background:linear-gradient(#fff2b0,#f2c14e 50%,#b7791f);border-radius:3px;padding:2px 4px;margin-right:4px;vertical-align:1px;box-shadow:0 0 6px #ffcf4d99}
.gm-badge[hidden]{display:none}

/* Phone landscape (in game): the quest tracker sat on top of the joystick in the bottom-left. Move it beside the
   character card at the top (scrolls if long); the buff bar drops under the card instead (see renderBuffs). */
@media(max-height:520px) and (orientation:landscape){
 body.playing #quest-tracker{width:220px;max-height:min(150px,calc(100vh - 235px));overflow-y:auto;box-sizing:border-box}
}

/* Floating joystick (touch): while held it sits under the finger (inline left/top from game.js) and glows a bit */
#joystick.floating{background:#c5d6b738;border-color:#f2e6b890;box-shadow:0 0 18px #f2c14e33;z-index:7}
#joystick.floating div{background:#e8d7a8b0}
#create-back{display:block;width:100%;margin-top:8px;padding:9px;font-size:13px;background:transparent;border:1px solid #ffffff2e;border-radius:10px;color:#cfd8dc;cursor:pointer}#create-back:hover{background:#ffffff0f;color:#fff}