@import url('/base.css');
:root{--ink:#eee9d9;--muted:#b2c2b6;--gold:#edc68b;--dark:#173b32;--line:rgba(218,211,167,.2);--panel:rgba(19,48,41,.92);--green:#86bc99}*{box-sizing:border-box}body{margin:0;overflow:hidden;color:var(--ink);font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif;font-size:14px;background:#9dbc98}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;touch-action:manipulation}button:disabled{cursor:default;opacity:.42}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:hover:not(:disabled){filter:brightness(1.13)}input{width:100%;background:#0f3029;border:1px solid var(--line);border-radius:7px;padding:11px 12px;color:var(--ink);outline:none}input::placeholder{color:#8ba095}input:focus{border-color:var(--gold)}.hidden{display:none!important}#world,#floats{position:fixed;inset:0}#world canvas{display:block;width:100%;height:100%;touch-action:none}#floats{pointer-events:none;overflow:hidden;z-index:4}.floating{position:absolute;font-weight:800;font-size:20px;text-shadow:0 2px 2px #182f24;animation:float-up 1s forwards;white-space:nowrap}.floating.heal{color:#aaffc0}.floating.hurt{color:#ffaf90}.floating.damage{color:#ffedb6}.floating.reward{color:#e8cd8f;font-size:14px}@keyframes float-up{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-110px)}}#loading{position:fixed;inset:0;display:grid;place-items:center;background:#193c32;z-index:30;color:var(--gold);font-size:18px;letter-spacing:1px}.entry{position:fixed;inset:0;z-index:6;display:grid;grid-template-columns:1fr 440px;gap:50px;align-items:center;padding:48px max(5vw,24px);background:linear-gradient(90deg,rgba(15,39,33,.78) 0%,rgba(24,48,40,.2) 50%,rgba(20,46,38,.68) 100%);overflow-y:auto}.entry-story{max-width:580px;align-self:center;padding-bottom:30px;text-shadow:0 2px 14px #173e32}.eyebrow{display:inline-flex;align-items:center;gap:12px;letter-spacing:3px;font-size:12px;color:#e4c58d}.eyebrow i{display:block;width:28px;height:1px;background:var(--gold)}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:8px;font-size:clamp(54px,6.5vw,92px);margin:22px 0;color:#fff3d7;line-height:1}h1 span{display:block;font-size:20px;letter-spacing:17px;margin:16px 0 0 5px}.entry-story>p{font-size:25px;line-height:1.55;font-weight:300;margin:38px 0 26px}.story-tags{display:flex;gap:10px;flex-wrap:wrap}.story-tags span{border:1px solid rgba(230,222,181,.28);background:rgba(29,64,51,.3);padding:7px 13px;border-radius:30px;font-size:12px}.entry-caption{margin-top:65px;font-size:12px;color:#d7decf;letter-spacing:1px}.entry-caption span{color:var(--gold);padding:0 15px}.entry-card{background:linear-gradient(140deg,rgba(25,58,47,.98),rgba(13,37,32,.97));border:1px solid #9caa8166;padding:27px;border-radius:18px;box-shadow:0 25px 70px #0b241a66}.card-heading{display:flex;align-items:center;gap:15px}.emblem{font-size:40px;color:var(--gold);line-height:1}.card-heading h2{font-size:22px;margin:0;font-weight:600}.card-heading p{font-size:12px;color:var(--muted);margin:3px 0 0}.entry-tabs{display:flex;margin:23px 0 15px;border-bottom:1px solid var(--line)}.entry-tabs button{padding:10px 0;margin-right:24px;color:var(--muted);border-bottom:2px solid transparent}.entry-tabs .active{color:var(--gold);border-color:var(--gold)}.job-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.job-choice{background:#29504075;border:1px solid var(--line);border-radius:9px;padding:4px 0 8px;position:relative;overflow:hidden}.job-choice.active{border-color:var(--gold);background:#476c4b75;box-shadow:inset 0 0 18px #d0b77912}.job-choice small{display:block;font-size:11px}.sprite-tile{background-image:url('/assets/sprites.png');background-size:400% 400%;background-repeat:no-repeat}.job-choice .sprite-tile{width:76px;height:80px;margin:auto}.job-description{min-height:86px;padding:11px 0 3px}.job-description strong{color:var(--gold);margin-right:8px}.job-description>span{font-size:11px;color:var(--muted)}.job-description p{margin:4px 0;font-size:12px;line-height:1.6;color:#cfdbcd}.entry label{display:block;font-size:12px;color:#d2dbca;margin:11px 0 0}.entry input{margin-top:6px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary{background:linear-gradient(120deg,#edd3a1,#cca366);border:1px solid #f0d7a8;border-radius:7px;color:#23392c;padding:10px 17px;font-weight:700;box-shadow:0 3px 10px #081d1740}.secondary{border:1px solid var(--line);border-radius:7px;padding:9px 15px;color:#e1e9d9;background:#294f40}.wide{width:100%;padding:14px}.primary span{float:right}.form-error{color:#ffb295;font-size:12px;min-height:18px;margin:10px 0}.entry-foot{text-align:center;font-size:11px;color:#92ab98;margin:15px 0 0}.entry-foot span{padding:0 7px}.glass{background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 26px #163c2838;border-radius:10px;backdrop-filter:none}.hud{position:fixed;inset:0;pointer-events:none;z-index:5}.hud>*{pointer-events:auto}.character-card{position:absolute;left:20px;top:20px;width:310px;display:flex;align-items:center;padding:13px 14px 28px;gap:8px}.portrait{width:66px;height:75px;flex-shrink:0;filter:drop-shadow(0 4px 4px #0005)}.character-detail{flex:1;min-width:0}.name-line{display:flex;justify-content:space-between;gap:7px;align-items:center}.name-line strong{font-size:15px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name-line span{font-size:10px;color:var(--gold)}.level-line{display:flex;gap:9px;font-size:10px;color:#c9d8c7;margin:4px 0 7px}.level-line #gold{margin-left:auto;color:var(--gold)}.meter{border-radius:4px;overflow:hidden;position:relative;background:#071f1bbf;height:14px;margin:4px 0;box-shadow:inset 0 1px 2px #0006}.meter>div{height:100%;transition:width .2s;border-radius:3px}.meter.hp>div{background:linear-gradient(90deg,#699c62,#9bc77b)}.meter.mp>div{background:linear-gradient(90deg,#48829e,#8bb4cb)}.meter>span{position:absolute;inset:0;font-size:9px;text-align:center;color:#fff;text-shadow:0 1px 1px #000;line-height:14px}.xp-wrap{position:absolute;bottom:7px;left:18px;right:18px;display:flex;align-items:center;gap:7px}.xp-wrap .meter{flex:1;height:3px}.xp>div{background:#e2bd79}.xp-wrap small{font-size:9px;color:#c2cbaa}.map-title{position:absolute;top:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;text-align:center;pointer-events:none;color:#fff7df;text-shadow:0 2px 3px #2f5237,0 1px 12px #1f432e}.map-ornament{font-size:30px;color:#ffdc94}.map-title strong{font-size:21px;font-weight:600;letter-spacing:1px}.map-title small{display:block;font-size:11px;margin-top:3px}.minimap-card{position:absolute;top:20px;right:20px;width:182px;padding:8px}.mini-top,.mini-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--muted)}#minimap{width:164px;height:136px;border-radius:5px;margin:7px 0 3px;background:#688d66}.connected{color:#a3d5a0}.disconnected{color:#ffd29b}.mini-bottom button{font-size:16px;padding:0 4px}.quest-card{position:absolute;top:161px;left:20px;width:310px;display:flex;gap:12px;padding:12px 15px;align-items:center}.quest-icon{font-family:Georgia,serif;width:27px;height:27px;border:1px solid #d7b57788;border-radius:50%;font-size:22px;line-height:24px;text-align:center;color:var(--gold);background:#bc984318}.quest-card small{display:block;color:#b6c4b1;font-size:10px;margin-bottom:3px}.quest-card strong{font-size:12px;font-weight:400}.quest-card button{margin-left:auto;color:var(--gold);font-size:22px}.toolbar{position:absolute;right:20px;top:233px;display:flex;flex-direction:column;gap:7px}.toolbar button{background:var(--panel);border:1px solid var(--line);width:57px;height:55px;border-radius:8px;position:relative;box-shadow:0 3px 8px #26452e36}.toolbar span{display:block;font-size:23px;color:var(--gold);line-height:25px}.toolbar small{display:block;font-size:9px;color:#d7e1ce}.toolbar i{position:absolute;right:6px;top:6px;width:7px;height:7px;background:#f4ca72;border-radius:50%}.target-card{position:absolute;top:97px;left:50%;transform:translateX(-50%);width:210px;text-align:center;padding:9px 22px 7px}.target-card strong{font-size:12px;color:#f1d5a6}.target-card .meter{height:5px;margin:7px 0 4px}.target-card small{font-size:9px;color:var(--muted)}.target-card button{position:absolute;right:5px;top:3px;font-size:18px}.buffs{position:absolute;left:24px;top:230px;display:flex;gap:6px;font-size:10px;color:var(--gold)}.buffs span{background:var(--panel);border-radius:5px;padding:5px 8px}.chat-wrap{position:absolute;bottom:22px;left:20px;width:308px;overflow:hidden}.chat-header{padding:5px 10px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.chat-header button{font-size:11px;padding:4px 9px;color:var(--muted)}.chat-header .active{color:var(--gold);background:#bba97113;border-radius:4px}.chat-messages{height:143px;overflow-y:auto;overscroll-behavior:contain;padding:7px 12px;font-size:11px;line-height:1.8;scrollbar-width:thin;scrollbar-color:#73976f50 transparent}.chat-row{overflow-wrap:anywhere;margin-bottom:3px}.chat-row .sender{color:#dbc89c;font-weight:600;padding:0;text-align:left;font-size:11px}.chat-row.party{color:#a7d1ec}.chat-row .chat-time{color:#879c87;font-size:9px;margin-right:5px}.chat-menu{display:inline-flex;gap:5px}.chat-menu button{font-size:9px;color:var(--gold);padding:1px 4px;border:1px solid var(--line);border-radius:3px}.chat-wrap form{display:flex;padding:6px;border-top:1px solid var(--line);gap:3px}.chat-wrap input{border:0;background:#071e1970;font-size:11px;padding:8px}.chat-wrap form button{color:var(--gold);padding:0 9px}.chat-wrap.collapsed .chat-messages,.chat-wrap.collapsed form{display:none}.hotbar{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);text-align:center}.hotbar-caption{font-size:10px;letter-spacing:1px;margin-bottom:9px;text-shadow:0 1px 5px #1b372a}.hotbar-caption span{padding-left:10px;color:var(--gold)}.hotbar-slots{display:flex;gap:6px;align-items:center;padding:8px;border:1px solid #dfc08666;border-radius:13px;background:var(--panel);box-shadow:0 6px 30px #152e2844}#skill-slots{display:flex;gap:6px}.action-slot{position:relative;width:57px;height:61px;border:1px solid #bfb77940;border-radius:7px;background:linear-gradient(150deg,#4d6d45,#244939);padding:12px 1px 5px;overflow:hidden}.action-slot b{display:block;font-size:24px;font-weight:400;color:#f5db9e;line-height:25px}.action-slot small{font-size:9px;white-space:nowrap}.action-slot kbd{position:absolute;top:3px;left:5px;font-family:inherit;font-size:8px;color:#d0d9c6}.action-slot .cooldown{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:600;font-size:18px;text-shadow:0 1px 2px #000;background:#0a2319b0;pointer-events:none}.action-slot .cooldown:empty{display:none}.action-slot.selected{border-color:#ffe0a0;box-shadow:0 0 14px #ffe29b55}.action-slot.locked{filter:grayscale(1);opacity:.55}.action-slot.potion{background:linear-gradient(130deg,#885348,#593f37)}.action-slot.stop{width:39px;background:#254539}.action-slot.stop b{font-size:15px}.journey-note{position:absolute;left:50%;transform:translateX(-50%);bottom:117px;font-size:10px;color:#fff4d6;background:#2146339c;border-radius:30px;padding:5px 14px;pointer-events:none}.aim-hint{position:absolute;bottom:135px;left:50%;transform:translateX(-50%);background:#193d32ec;border:1px solid var(--gold);color:var(--gold);padding:9px 16px;border-radius:8px;font-size:12px}.toasts{position:fixed;top:24%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:15;pointer-events:none;align-items:center;width:min(90%,440px)}.toast{background:#193e33ed;border:1px solid #b5b17b66;padding:9px 18px;box-shadow:0 3px 18px #16382844;border-radius:7px;color:#f3dfb3;font-size:12px;text-align:center;animation:toast .2s ease-out}@keyframes toast{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.modal-layer{position:fixed;inset:0;z-index:12;background:#102d2580;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}.modal{width:520px;max-width:100%;max-height:85vh;overflow:auto;background:#173d32f8;border:1px solid #c5b28066;padding:23px}.modal>header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:17px}.modal header small{font-size:10px;color:var(--gold);letter-spacing:2px}.modal h2{margin:4px 0 0;font-size:22px}.modal header button{font-size:26px;line-height:1;padding:0 5px}.modal p{font-size:13px;line-height:1.8;color:#c6d6c6}.modal h3{font-size:14px;color:var(--gold);margin:20px 0 10px}.modal .lead{font-size:13px;color:var(--gold)}.modal .muted{font-size:11px;color:var(--muted)}.item-row,.skill-row,.party-row,.stat-row{display:flex;gap:12px;align-items:center;background:#33594266;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:7px}.item-icon{font-size:28px;color:var(--gold);width:33px;text-align:center;flex-shrink:0}.row-main{flex:1;min-width:0}.row-main strong{font-size:12px;display:block}.row-main p{font-size:10px;line-height:1.5;margin:3px 0;color:var(--muted)}.row-main small{font-size:10px;color:var(--gold)}.item-row button,.skill-row button,.stat-row button,.party-row button{border:1px solid #d2bd8760;border-radius:5px;padding:6px 9px;background:#cbb07a18;font-size:10px;white-space:nowrap;color:var(--gold)}.item-actions{display:flex;gap:5px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.stat-row{margin:0;gap:6px;font-size:11px}.stat-row strong{margin-left:auto;color:var(--gold);font-size:14px}.stat-row button{padding:2px 7px;font-size:15px}.stat-help{font-size:10px!important}.party-row .sprite-tile{width:45px;height:48px;flex-shrink:0}.party-row .meter{height:4px;margin:4px 0 0}.modal .button-row{display:flex;gap:9px;margin:16px 0 0}.invite{position:fixed;right:90px;bottom:130px;z-index:14;padding:18px;width:265px;border-color:#cdb67a77}.invite strong{color:var(--gold);font-size:14px}.invite p{font-size:12px;margin:5px 0 15px}.invite button{font-size:11px}.joystick{display:none;position:absolute;width:105px;height:105px;border:1px solid #e8d29f60;border-radius:50%;background:#123a2e55;touch-action:none}.joystick div{position:absolute;width:42px;height:42px;left:31px;top:31px;border-radius:50%;border:1px solid #f2d99a88;background:#466d4caa;pointer-events:none}.party-selected{border-color:var(--gold)}body.low-quality .glass{backdrop-filter:none}
@media(max-width:1050px){.entry{grid-template-columns:1fr 400px;gap:25px;padding:25px}.entry-card{padding:22px}.entry-story>p{font-size:21px}.map-title{left:52%;top:24px}.map-title strong{font-size:18px}.map-title small{max-width:200px}.character-card,.quest-card{width:280px;left:12px}.character-card{top:12px}.quest-card{top:150px}.chat-wrap{left:12px;width:265px}.minimap-card{right:12px;top:12px;width:150px}#minimap{width:132px;height:105px}.toolbar{top:195px;right:12px}.toolbar button{width:47px;height:48px}.hotbar{left:61%;bottom:16px}.journey-note{left:61%;bottom:113px}.hotbar-caption{display:none}}
@media(pointer:coarse){.joystick{display:block;left:26px;bottom:95px}.journey-note{display:none}.hotbar{left:auto;right:14px;transform:none}.chat-wrap{bottom:12px}.hotbar .action-slot kbd{display:none}.hotbar .action-slot{height:62px;padding-top:9px}.hotbar .action-slot.stop{display:none}.hotbar-slots{gap:5px;padding:6px}.entry input{font-size:16px}.hud input{font-size:16px}.chat-wrap.collapsed{width:115px}.chat-header button{font-size:11px}.chat-wrap:not(.collapsed){z-index:8;bottom:12px;width:min(330px,80vw)}.aim-hint{bottom:95px;left:55%;max-width:65vw}.toolbar{gap:4px}}
@media(max-width:700px){.entry{display:flex;flex-direction:column;gap:20px;padding:30px 18px;justify-content:flex-start;background:#163c318c}.entry-story{padding:0;text-align:center}.entry-story h1{font-size:46px;letter-spacing:6px;margin:15px 0}.entry-story h1 span{font-size:13px;letter-spacing:13px;margin:10px 0 0 8px}.entry-story>p,.story-tags,.entry-caption{display:none}.eyebrow{font-size:10px;letter-spacing:2px}.entry-card{width:min(100%,420px);padding:22px}.character-card{width:220px;padding:9px 10px 24px;gap:4px;top:9px;left:9px}.portrait{width:43px;height:54px}.name-line strong{font-size:12px;max-width:100px}.name-line span{font-size:9px}.level-line{font-size:8px;gap:5px;margin-bottom:4px}.meter{height:11px;margin:3px 0}.meter>span{font-size:8px;line-height:11px}.xp-wrap{left:10px;right:10px;bottom:5px}.xp-wrap small{font-size:8px}.quest-card{width:220px;left:9px;top:113px;padding:8px 10px;gap:8px}.quest-card small{font-size:8px}.quest-card strong{font-size:10px}.quest-icon{width:23px;height:23px;line-height:20px;font-size:18px}.map-title{left:9px;transform:none;top:180px;gap:7px;text-align:left}.map-title strong{font-size:15px}.map-title small{display:none}.map-ornament{font-size:18px}.minimap-card{width:114px;right:9px;top:9px;padding:6px}#minimap{width:100px;height:81px;margin:4px 0}.mini-top,.mini-bottom{font-size:8px}.mini-top #online{display:none}.toolbar{right:9px;top:144px;gap:5px}.toolbar button{width:41px;height:41px}.toolbar span{font-size:20px;line-height:22px}.toolbar small{font-size:8px}.toolbar #logout{display:none}.target-card{top:222px;left:9px;transform:none;width:160px;padding:6px 18px}.target-card strong{font-size:10px}.target-card small{font-size:8px}.buffs{top:207px;left:10px;font-size:8px}.hotbar{right:9px;bottom:15px}.action-slot{width:45px;height:55px!important}.action-slot b{font-size:23px}.action-slot small{font-size:8px}.hotbar-slots{gap:4px;border-radius:10px}#skill-slots{gap:4px}.chat-wrap{left:9px;bottom:15px;width:250px}.chat-messages{height:140px}.joystick{width:94px;height:94px;left:22px;bottom:83px}.joystick div{left:25px;top:25px}.invite{right:9px;bottom:90px;width:250px}.modal-layer{padding:12px}.modal{padding:18px;max-height:90dvh}.modal h2{font-size:19px}.toasts{top:40%;font-size:11px}.item-row{gap:7px;padding:9px}.item-actions{flex-direction:column}.stat-row{font-size:10px}.stat-grid{gap:5px}.field-pair{gap:8px}}
@media(max-height:550px) and (min-width:701px){.entry{padding:16px 35px}.entry-card{padding:18px;max-height:96vh;overflow:auto}.entry-story h1{font-size:57px}.entry-story>p{margin:24px 0;font-size:20px}.entry-caption{margin-top:25px}.entry-tabs{margin:14px 0 8px}.job-choice .sprite-tile{height:62px;width:63px}.job-description{min-height:70px}.minimap-card{width:114px;padding:6px}#minimap{width:100px;height:68px}.toolbar{top:131px}.toolbar button{width:41px;height:40px}.toolbar span{font-size:18px;line-height:20px}.character-card{width:248px;padding:9px 9px 24px}.portrait{width:48px;height:56px}.quest-card{top:119px;width:248px;padding:8px 10px}.map-title{top:15px}.map-title small{display:none}.chat-messages{height:97px}.hotbar .action-slot{height:52px;width:50px}.joystick{bottom:60px}.target-card{top:66px}.journey-note{display:none}.buffs{top:180px}}
.world-label{position:absolute;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;font-size:10px;font-weight:600;line-height:1.4;text-align:center;text-shadow:0 1px 2px #143322,0 0 3px #143322;z-index:2}.world-label>span{background:#173b3266;padding:2px 5px;border-radius:4px}.world-label>i{display:block;width:40px;height:4px;background:#173b32bb;border-radius:2px;margin:4px auto 0;overflow:hidden}.world-label b{display:block;height:100%;border-radius:2px}@media(max-width:700px){.world-label{font-size:9px}.joystick{display:block}.hotbar{left:auto;transform:none}.hotbar .stop{display:none}.hotbar-caption{display:none}}
@media(max-width:700px){.journey-note{display:none}}