:root{font-family:Inter,system-ui,sans-serif;color:#e9f6ec;background:#061827;font-size:14px}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,input:focus-visible{outline:2px solid #ffe5a0;outline-offset:2px}.hide{display:none!important}
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 35% 25%,#477c75 0,#1a4b5d 26%,#0a2439 58%,#061423 100%);position:relative;overflow:auto}.auth:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(145deg,transparent 0 96px,#ffffff09 97px 98px),linear-gradient(0deg,#04121baf,transparent 60%);pointer-events:none}.auth-wrap{position:relative;width:min(1020px,100%);display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}.brand{font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:.09em;text-shadow:0 3px 14px #001}.brand .star{color:#e6bd70;font-size:.7em;margin-right:.3em}.auth h1{font-size:clamp(48px,8vw,98px);margin:0;line-height:.93;color:#fff1cf}.auth h1 small{display:block;font-size:.28em;letter-spacing:.54em;margin:12px 0 0 9px;color:#e1b66f}.auth .tagline{font:italic clamp(22px,3vw,38px) Georgia,serif;color:#fff4d9;margin:30px 0 12px}.auth-copy{max-width:470px;line-height:1.65;color:#daece8;font-size:15px}.feature-line{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.feature-line span{border:1px solid #d2edd458;background:#132d41ad;border-radius:999px;padding:8px 12px;color:#e3f5e6;font-size:12px}.auth-card,.panel{border:1px solid #d9c58a66;background:linear-gradient(145deg,#142e3ef5,#071b2df5);box-shadow:0 24px 65px #0008,inset 0 1px #ffffff20;border-radius:14px}.auth-card{padding:28px}.auth-card h2,.panel h2{font:600 24px Cinzel,Georgia,serif;color:#f4db9d;margin:0 0 8px}.auth-card p{color:#aabfca;line-height:1.5}.auth-card label{display:block;color:#d8e9e7;font-weight:600;font-size:12px;margin:17px 0 7px}.auth-card input{width:100%;height:46px;border:1px solid #70939b91;border-radius:7px;background:#061522;color:white;padding:0 13px}.primary{background:linear-gradient(#edc77b,#b37d36);border:1px solid #ffe1a0;color:#182637;font-weight:700;border-radius:7px;min-height:45px;padding:10px 17px;box-shadow:0 3px 12px #0005}.primary:hover{filter:brightness(1.1)}.auth-card .primary{width:100%;margin-top:23px}.link{background:none;border:0;color:#f4d798;padding:12px 0}.error{color:#ffd6bf;min-height:18px}.auth-footer{font-size:11px;color:#bbd4d4;margin-top:25px}
.game{width:100vw;height:100dvh;overflow:hidden;background:#07192b;position:relative}.game canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px 15px #04111d88}.topwash{position:absolute;inset:0 0 auto;height:160px;background:linear-gradient(#031321b9,transparent);pointer-events:none}.hud{position:absolute;inset:0;pointer-events:none}.hud>*{pointer-events:auto}.profile{position:absolute;top:18px;left:20px;display:flex;align-items:center;gap:12px;min-width:280px;padding:12px 17px 12px 12px;background:#071e31dc;border:1px solid #bdaa76a3;border-radius:12px;box-shadow:0 8px 26px #0006}.avatar{width:48px;height:48px;border:2px solid #ebcb82;border-radius:50%;display:grid;place-items:center;background:radial-gradient(#a2c879,#367a71 62%,#1d4156);font-size:27px}.profile-info{flex:1}.name-row{display:flex;justify-content:space-between;gap:20px;align-items:baseline}.name-row strong{font:600 15px Cinzel,serif}.level{color:#efd18c;font-weight:700;font-size:12px}.meter{height:7px;border-radius:8px;background:#102c3d;margin-top:7px;overflow:hidden;border:1px solid #a4bec43b}.meter>i{display:block;height:100%;background:linear-gradient(90deg,#b95253,#ef9271)}.meter.xp>i{background:linear-gradient(90deg,#458a9e,#77ddd0)}.minitext{display:flex;justify-content:space-between;color:#bcd3d0;font-size:10px;margin-top:3px}.top-right{position:absolute;top:18px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:9px}.location{background:#071e31dd;border:1px solid #bdaa76a3;padding:10px 14px;border-radius:10px;min-width:210px;text-align:right}.location b{display:block;font:600 15px Cinzel,serif;color:#f1dcaa}.location small{color:#b8d5d4}.dock{display:flex;gap:6px;background:#071e31dc;padding:6px;border:1px solid #bdaa76a3;border-radius:10px}.dock button,.control,.battle-actions button,.tabs button,.zone-card,.companion-card{background:linear-gradient(#224354,#102d42);color:#e9f8f2;border:1px solid #8fbab254;border-radius:8px}.dock button{min-width:52px;height:48px;font-size:20px}.dock button span{display:block;font-size:9px;letter-spacing:.02em}.quest-card{position:absolute;top:130px;left:20px;width:min(295px,calc(100vw - 40px));padding:16px;background:#071e31da;border:1px solid #81a79b8c;border-radius:11px}.eyebrow{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:10px;color:#f5cd82}.quest-card strong{display:block;margin:7px 0;color:#e6f3de}.quest-card p{margin:4px 0 8px;color:#bdd1cf;line-height:1.4;font-size:12px}.quest-progress{height:5px;border-radius:4px;background:#294b55;overflow:hidden}.quest-progress i{display:block;height:100%;background:#e9bd74}.quest-card button{margin-top:10px;min-height:48px}.bottom-bar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:end}.action{width:58px;height:58px;border-radius:10px;border:1px solid #d7b778;background:linear-gradient(#275162,#0c2a3e);color:#f9ecd2;box-shadow:0 4px 15px #0007;font-size:23px}.action small{display:block;font-size:10px}.action:hover,.dock button:hover,.control:hover{filter:brightness(1.25)}.chatline{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);min-width:280px;text-align:center;background:#051724c9;border:1px solid #a8bcab66;padding:9px 16px;border-radius:999px;color:#f5e3b8;pointer-events:none;opacity:0;transition:opacity .3s}.chatline.show{opacity:1}.movement{position:absolute;bottom:22px;left:22px;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:3px}.control{min-width:48px;min-height:48px;font-size:18px;opacity:.88}.movement button:nth-child(1){grid-row:1;grid-column:1}.movement button:nth-child(2){grid-row:1;grid-column:2}.movement button:nth-child(3){grid-row:1;grid-column:3}.movement button:nth-child(4){grid-row:2;grid-column:1}.movement button:nth-child(5){grid-row:2;grid-column:2}.movement button:nth-child(6){grid-row:2;grid-column:3}.movement button:nth-child(7){grid-row:3;grid-column:1}.movement button:nth-child(8){grid-row:3;grid-column:2}.movement button:nth-child(9){grid-row:3;grid-column:3}.tip{position:absolute;bottom:24px;right:20px;color:#d8eae0c7;font-size:11px;background:#051724aa;padding:9px 12px;border-radius:8px}.modal-backdrop{position:absolute;inset:0;background:#03131ac9;display:grid;place-items:center;padding:20px;z-index:3}.panel{width:min(810px,100%);max-height:min(720px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #d3c89b45}.panel-head h2{margin:0}.close{color:#e8f2df;background:#223c4a;border:1px solid #77978e;border-radius:6px;width:48px;height:48px;font-size:20px}.panel-body{padding:20px 22px;overflow:auto}.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}.tabs button{padding:9px 14px}.tabs button.active{background:#8c6e3b;border-color:#f6d58b;color:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}.zone-card,.companion-card{text-align:left;padding:13px;min-height:100px}.zone-card b,.companion-card b{display:block;color:#f5dfa7}.zone-card small,.companion-card small{display:block;color:#b7cfcc;margin-top:6px}.zone-card.locked{opacity:.5}.zone-card:hover,.companion-card:hover{border-color:#f4cc79}.rich{line-height:1.65;color:#d1e3dc}.muted{color:#a9c3c6}.inventory-list{display:grid;gap:7px}.inventory-item{padding:10px 13px;border:1px solid #9fbdb453;background:#15374b;border-radius:7px}.world-map{height:250px;border:1px solid #d7c38a88;background:radial-gradient(ellipse at 34% 45%,#67875b 0 12%,transparent 13%),radial-gradient(ellipse at 55% 40%,#9e8e60 0 11%,transparent 12%),radial-gradient(ellipse at 62% 71%,#758d63 0 12%,transparent 13%),linear-gradient(120deg,#174d63,#103a56);position:relative;overflow:hidden;margin-bottom:15px;border-radius:8px}.world-map:after{content:"N O R T H   S E A";position:absolute;right:13px;bottom:9px;font:italic 15px Georgia;color:#e6e7d9a2}.map-pin{position:absolute;background:#102737e8;color:#f5dfaa;border:1px solid #d9be80;border-radius:99px;padding:6px 9px;font-size:11px}.battle-overlay{position:absolute;right:20px;bottom:110px;width:min(365px,calc(100vw - 40px));padding:20px;background:linear-gradient(145deg,#183f50f5,#071e31f5);border:1px solid #e8c77daa;border-radius:12px;box-shadow:0 15px 50px #000a}.battle-overlay h2{font:600 22px Cinzel,serif;color:#f7d696;margin:0}.battle-creature{height:145px;display:grid;place-items:center;font-size:76px;text-shadow:0 8px 22px #0008}.battle-actions{display:flex;gap:8px;margin-top:16px}.battle-actions button{flex:1;min-height:48px}.battle-actions button:first-child{background:linear-gradient(#b86950,#793f41)}.battle-actions button:nth-child(2){background:linear-gradient(#a89060,#685838)}.battle-overlay p{color:#d2e6df;line-height:1.4}.scene-label{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font:600 22px Cinzel,serif;color:#fff5cf;text-shadow:0 3px 8px #001;pointer-events:none;opacity:0;transition:opacity .5s}.scene-label.show{opacity:1}
@media(max-width:800px){.auth-wrap{grid-template-columns:1fr}.auth-intro{text-align:center}.auth-copy{margin-inline:auto}.feature-line{justify-content:center}.auth-card{max-width:480px;width:100%;margin:auto}.profile{min-width:220px;top:8px;left:8px;padding:8px}.avatar{width:38px;height:38px;font-size:21px}.top-right{top:8px;right:8px}.location{min-width:0;padding:6px 9px}.dock{gap:3px;padding:3px}.dock button{min-width:48px;height:48px;font-size:16px}.dock button span{font-size:8px}.quest-card{top:104px;left:8px;width:210px;padding:10px}.tip{display:none}.bottom-bar{bottom:12px}.action{width:48px;height:50px;font-size:20px}.movement{bottom:10px;left:9px;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}.control{min-width:48px;min-height:48px}.battle-overlay{bottom:76px;right:8px}.chatline{bottom:76px}.panel-body{padding:14px}}
.battle-creature{display:block;width:192px;height:192px;max-width:100%;margin:0 auto;image-rendering:pixelated}
@media(max-width:560px){.profile{max-width:175px;min-width:0}.profile .avatar{display:none}.name-row{gap:4px}.name-row strong{font-size:12px}.location b{font-size:11px}.location small{font-size:9px}.quest-card{top:86px;width:180px}.dock button{min-width:48px;font-size:15px}.dock button span{display:none}.bottom-bar{left:auto;right:7px;transform:none;bottom:11px}.action{width:48px;height:48px}.movement{bottom:8px}.auth h1{font-size:46px}}
@media(max-height:560px){.quest-card{display:none}.battle-overlay{bottom:65px}.profile{top:5px}.top-right{top:5px}.bottom-bar,.movement{bottom:5px}}
@media(max-width:560px){.profile{top:8px;left:8px;width:calc(100% - 16px);max-width:none;box-sizing:border-box}.top-right{top:76px;left:8px;right:8px;align-items:stretch;gap:4px}.location{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 8px}.dock{justify-content:space-between}.dock button{min-width:48px;height:48px;flex:1}.quest-card{top:180px;width:calc(100vw - 16px);box-sizing:border-box}.movement{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:2px}.bottom-bar{gap:4px}.action{width:48px;height:48px}.battle-actions button{min-height:48px}}
@media(max-width:360px){.profile{min-height:56px}.location small{font-size:8px}.quest-card{top:176px}.bottom-bar{right:5px}.movement{left:5px}}

/* Familiar MMO HUD hierarchy from Jade: status and journey left, menu and map right, controls below. */
.profile{top:8px;left:8px;width:252px;min-width:0;padding:8px 12px 8px 8px;gap:8px}
.name-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.name-row .level{white-space:nowrap;flex:none}
.avatar{width:52px;height:52px;flex:none;border-radius:9px}
.profile-meta{display:flex;justify-content:space-between;gap:5px;margin-top:5px;color:#d0e5dc;font-size:10px;white-space:nowrap}
.quest-card{top:124px;left:8px;width:252px;padding:11px;border-left:3px solid #d8b56c}
.top-right{top:8px;right:8px;gap:5px}
.top-right .dock{order:0;gap:2px;padding:4px;border-radius:12px}
.dock button{height:53px;min-width:52px;border:0;background:transparent;border-radius:9px;color:#f6e4b9}
.dock button:hover{background:#2a5b5b;color:#fff2c7}
.dock button span{color:#e0ece6;font-size:10px}
.top-right .location{order:1;width:178px;min-width:0;padding:6px 9px;text-align:left;border-radius:10px 10px 0 0}
.minimap{order:2;display:flex;flex-direction:column;align-items:stretch;width:178px;padding:4px;background:linear-gradient(#173b43ed,#071e31ed);border:1px solid #bdaa76a3;border-radius:0 0 10px 10px;color:#eaf4e5;box-shadow:0 8px 26px #0006;text-align:left}
.minimap-title{padding:2px 4px 4px;color:#efd18c;font-weight:700;font-size:11px}
.minimap canvas{display:block;width:168px;height:168px;aspect-ratio:1;border:1px solid #c3ae7b75;border-radius:4px;image-rendering:pixelated}
.minimap-coords{padding:4px 4px 1px;color:#d6e7dc;font-size:10px}
.movement{bottom:8px;left:8px}
.bottom-bar{left:auto;right:8px;bottom:8px;transform:none}
.action{width:58px;height:58px;border-radius:50%;border:2px solid #d7b778}
.activity{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:min(380px,calc(100vw - 410px));min-height:58px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px 12px;background:#071e31db;border:1px solid #bdaa76a3;border-radius:10px;color:#d7e9df;font-size:11px}
.activity b{color:#f2d591;font-size:11px}
.chatline{bottom:78px}
.tip{display:none}
@media(max-width:800px){.profile{top:8px;left:8px;width:220px}.quest-card{top:124px;left:8px;width:220px}.top-right{top:8px;right:8px}.dock button{min-width:48px;height:48px}.top-right .location,.minimap{width:150px}.minimap canvas{width:140px;height:140px}.activity{width:min(250px,calc(100vw - 360px));font-size:10px}.action{width:48px;height:48px}}
@media(max-width:560px){.top-right{top:8px;left:8px;right:8px;align-items:stretch}.top-right .dock{order:0;justify-content:space-between}.dock button{flex:1}.dock button span{display:block;font-size:9px}.profile{top:70px;left:8px;width:calc(100% - 16px);max-width:none}.profile .avatar{display:grid;width:42px;height:42px}.top-right .location{position:absolute;top:156px;right:0;width:145px;padding:5px 7px;border-radius:8px}.minimap{position:absolute;top:198px;right:0;width:145px;padding:3px;border-radius:8px}.minimap canvas{width:137px;height:137px}.quest-card{top:164px;left:8px;width:calc(100% - 169px);min-width:185px;padding:8px}.quest-card p{font-size:11px}.movement{left:8px;bottom:8px}.bottom-bar{right:8px;bottom:8px}.activity{left:8px;right:8px;bottom:169px;transform:none;width:auto;min-height:48px}.chatline{bottom:222px}}
@media(max-height:560px){.minimap{display:none}.quest-card{display:block;top:68px;max-height:130px;overflow:auto}.activity{display:none}.profile{top:5px}.top-right{top:5px}.movement,.bottom-bar{bottom:5px}}

/* Jade control shapes adapted to Monara's navy, turquoise and antique gold art. */
.top-right .dock{background:linear-gradient(#143944ee,#081f30ee);border-color:#b8945c}
.dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px 3px;min-height:54px;min-width:52px}
.dock button .menu-disc{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#568f88,#154b55 72%);border:2px solid #d7b877;color:#fff1c7;box-shadow:0 2px 5px #0019,inset 0 1px #fff4;font-size:18px;line-height:1}
.dock button .menu-label{display:block;color:#ecf1e2;font-size:10px;line-height:1.1}
.dock button:hover .menu-disc{box-shadow:0 0 10px #c9e8b889;border-color:#fff0ba}
.control{border-radius:50%;background:radial-gradient(circle at 35% 30%,#457c80,#123e52 72%);border:2px solid #c6ab71;box-shadow:0 2px 6px #0019;color:#fff0c1}
.control[data-dir="0,0"]{background:radial-gradient(circle at 35% 30%,#e4c87c,#8b642f 75%);color:#183037}
.bottom-bar{width:180px;height:155px;display:block;pointer-events:none}
.bottom-bar .action{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0;pointer-events:auto;background:radial-gradient(circle at 35% 30%,#478782,#113d52 72%);border:2px solid #d5b878;box-shadow:0 0 0 2px #102a37,0 5px 12px #0008;color:#fff0c7}
.bottom-bar .action small{font-size:9px;line-height:1.1}
.bottom-bar #action-attack{right:8px;bottom:8px;width:68px;height:68px;background:radial-gradient(circle at 35% 30%,#e7785d,#8c3634 72%);border:3px solid #f3d395}
.bottom-bar #action-capture{right:83px;bottom:23px;width:54px;height:54px}
.bottom-bar [data-modal="bag"]{right:99px;bottom:91px;width:50px;height:50px}
.bottom-bar .action:active,.control:active,.dock button:active{transform:scale(.95)}
@media(max-width:560px){.dock button{min-width:48px;min-height:54px}.dock button .menu-disc{width:29px;height:29px}.bottom-bar{width:145px;height:135px}.bottom-bar #action-attack{width:58px;height:58px;right:4px;bottom:5px}.bottom-bar #action-capture{width:48px;height:48px;right:68px;bottom:20px}.bottom-bar [data-modal="bag"]{width:48px;height:48px;right:82px;bottom:79px}.control{min-width:48px;min-height:48px}}
@media(max-width:560px){.top-right .location{top:166px}.minimap{top:208px}.quest-card{top:174px}}
@media(max-width:560px){.top-right .location{display:block}.top-right .location b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-right .location small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-height:560px) and (min-width:561px){.profile{top:5px;width:232px}.quest-card{top:106px;max-height:116px;width:232px}.top-right{top:5px}.top-right .location{width:112px;padding:3px 6px}.top-right .location b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-right .location small{display:none}.minimap{display:flex;width:112px;padding:3px}.minimap canvas{width:104px;height:104px}.minimap-title,.minimap-coords{font-size:9px;padding:1px 2px}.activity{display:none}.bottom-bar{width:165px;height:142px}}
.quest-head{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:30px;padding:0 0 3px;background:none;border:0;color:#f1d390;font:700 13px Georgia,serif;text-align:left}
.quest-head span{font:700 10px Inter,system-ui,sans-serif;color:#23343b;background:#e4c680;padding:3px 7px;border-radius:99px}
.quest-head:hover{color:#fff2ba}
.auth-language{position:absolute;top:14px;right:16px;display:flex;gap:4px;z-index:1;padding:4px;border:1px solid #bdaa76a3;border-radius:9px;background:#071e31dc}
.auth-language button,.language-setting button{min-height:38px;min-width:50px;padding:6px 12px;border:1px solid #9cbaa774;border-radius:6px;background:#173c4e;color:#e9f6ec}
.auth-language button.active,.language-setting button.active{background:#d4b36f;border-color:#ffe2a1;color:#142c37;font-weight:700}
.language-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;margin:10px 0;border-top:1px solid #bdaa765c;border-bottom:1px solid #bdaa765c}
.language-setting>div{display:flex;gap:6px}
html[lang="th"]{font-family:Tahoma,"Noto Sans Thai",system-ui,sans-serif}
html[lang="th"] .name-row strong,html[lang="th"] .location b,html[lang="th"] .quest-head,html[lang="th"] .auth-card h2,html[lang="th"] .panel h2{font-family:Tahoma,"Noto Sans Thai",system-ui,sans-serif}
html[lang="th"] .dock button .menu-label{font-size:9px}
html[lang="th"] .quest-card p{line-height:1.55}
@media(max-width:560px){.auth-language{top:7px;right:8px}.auth{padding-top:56px}.language-setting{align-items:flex-start;flex-direction:column}.language-setting>div{width:100%}.language-setting button{flex:1}}
@media(max-height:560px) and (min-width:561px){
  .quest-card{top:105px;max-height:125px;overflow:hidden;padding:6px 8px}
  .quest-card .quest-head{min-height:21px;height:21px;margin-top:0;padding:0}
  .quest-card strong{font-size:11px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quest-card p{font-size:10px;margin:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quest-card p:nth-of-type(2){display:none}
  .quest-card .primary{min-height:34px;margin-top:3px;padding:3px 8px;font-size:10px}
  .quest-progress{margin-top:2px}
}