:root{--cream:#fff8e8;--paper:#fffdf5;--cocoa:#57392f;--cocoa2:#7a5545;--sage:#80aa72;--sage2:#4f8058;--mint:#cae5c4;--peach:#f3a486;--gold:#efbd58;--rose:#df7e82;--sky:#a9d8df;--line:#714839;--shadow:0 8px 0 rgba(91,58,43,.12),0 16px 30px rgba(91,58,43,.13);--r:22px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#d9edcf;color:var(--cocoa);font-family:"Noto Sans Thai","Leelawadee UI",system-ui,sans-serif}button,input{font:inherit;color:inherit}button{cursor:pointer}.app{width:min(100%,480px);min-height:100dvh;margin:auto;background:var(--cream);overflow:hidden;position:relative}.creator{min-height:100dvh;padding:calc(26px + env(safe-area-inset-top)) 22px 28px;text-align:center;background:radial-gradient(circle at 50% 28%,#fffdf4 0 26%,transparent 27%),linear-gradient(#cce5c7 0 65%,#f4d7a7 65%);display:flex;flex-direction:column;align-items:center}.brand{font-size:30px;font-weight:1000;letter-spacing:-1px;color:#5f8e63;text-shadow:0 3px #fff}.brand span{color:#dd8973}.creator h1{font-size:25px;margin:16px 0 2px}.creator>p{font-size:13px;line-height:1.55;margin:0;max-width:330px}.preview-stage{width:238px;height:260px;margin:18px 0 10px;background:linear-gradient(#eaf6df,#fce9be);border:3px solid var(--line);border-radius:50% 50% 32% 32%;box-shadow:var(--shadow);display:grid;place-items:center;position:relative}.preview-stage:after{content:"";position:absolute;bottom:28px;width:132px;height:25px;border-radius:50%;background:#92b87955}.sprite{width:118px;height:150px;background-image:url('../assets/character-sprite-master.png');background-repeat:no-repeat;background-size:768px 512px;background-position:-13px -2px;position:relative;z-index:1}.sprite-b{background-position:-12px -80px}.sprite-c{background-position:-13px -158px}.choice-row{display:flex;gap:8px}.choice,.tabs button,.pill{border:2px solid #9c7967;background:#fff8e9;border-radius:999px;padding:8px 14px;font-weight:800}.choice.on,.tabs button.on{background:#69966a;color:white;border-color:#4f7655}.name-field{display:grid;text-align:left;width:100%;max-width:340px;font-size:12px;font-weight:800;margin:17px 0 12px}.name-field input{margin-top:5px;border:2px solid #9d7966;border-radius:14px;padding:12px 14px;background:#fffef8;font-size:16px;outline:none}.name-field input:focus{box-shadow:0 0 0 4px #f1be7180}.primary{border:3px solid #684436;border-radius:18px;background:#efb654;padding:13px 22px;width:100%;max-width:340px;font-weight:1000;box-shadow:0 5px 0 #996b3f}.privacy{margin-top:14px}.shell{min-height:100dvh;padding-bottom:86px}.topbar{height:72px;padding:calc(9px + env(safe-area-inset-top)) 12px 7px;display:flex;align-items:center;gap:8px;background:#fff8e8;border-bottom:2px solid #d1aa7e;position:sticky;top:0;z-index:10}.identity{border:0;background:transparent;display:flex;align-items:center;min-width:0;text-align:left;gap:7px;padding:0}.identity>span{display:grid}.identity b{font-size:14px}.identity small{font-size:10px}.presence{display:inline-block;width:7px;height:7px;background:#60a86a;border:1px solid white;border-radius:50%;margin-right:3px}.mini-sprite{width:42px;height:42px;border:2px solid #784d3d;border-radius:12px;background-image:url('../assets/character-sprite-master.png');background-size:384px 256px;background-position:-10px -8px;background-color:#cce3bf}.mini-sprite.sprite-b{background-position:-9px -48px}.mini-sprite.sprite-c{background-position:-9px -87px}.currencies{margin-left:auto;display:flex;gap:5px}.currencies span{background:white;border:2px solid #a37d60;border-radius:999px;padding:5px 7px;font-size:12px}.round{width:36px;height:36px;border:2px solid #986f58;border-radius:50%;background:white;position:relative}.dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#e16d6d;right:1px;top:0}.view{display:none}.view.on{display:block}.world{height:min(61dvh,590px);min-height:450px;position:relative;overflow:hidden;background:#bcd8ae}.world>img{width:100%;height:100%;object-fit:cover}.world-avatar{position:absolute;left:43%;top:58%;width:84px;height:105px;background-image:url('../assets/character-sprite-master.png');background-size:537px 358px;background-position:-10px -2px;filter:drop-shadow(0 6px 2px #61452d44);transition:left .55s ease,top .55s ease}.world-avatar.sprite-b{background-position:-9px -56px}.world-avatar.sprite-c{background-position:-9px -111px}.quest{position:absolute;left:12px;top:14px;background:#fff9e8ee;border:2px solid var(--line);border-radius:17px;padding:9px 12px;display:grid;box-shadow:0 5px 0 #6b4a3730}.quest small{color:#8b6a56}.quest b{font-size:14px}.quest span{font-size:11px}.hotspot{position:absolute;right:20px;bottom:24px;border:3px solid #684436;border-radius:22px;background:#8dc1d4;padding:10px 15px;box-shadow:0 5px 0 #537b83;color:#3f332e}.hotspot span{font-size:24px;display:block}.hotspot b{font-size:12px}.hotspot:disabled{filter:grayscale(.5);opacity:.7}.shared{margin:-8px 12px 14px;position:relative;background:#fff9e8;border:2px solid #8a624e;border-radius:20px;padding:13px;box-shadow:var(--shadow)}.shared header,.page-title,.card header{display:flex;justify-content:space-between;gap:9px;align-items:center}.shared header span{display:grid}.shared small{font-size:10px}.shared strong{color:#548158}.bar{height:13px;background:#dfd1a9;border:2px solid #765344;border-radius:20px;overflow:hidden;margin:9px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,#76a76a,#e7bb55);transition:width .4s}.shared p{font-size:11px;margin:0}.page-title{padding:18px 16px 10px}.page-title h1{font-size:23px;margin:0}.page-title>span{font-size:11px}.tabs{display:flex;gap:7px;overflow:auto;padding:5px 14px 12px}.tabs button{white-space:nowrap;padding:7px 12px;font-size:12px}.cards{display:grid;gap:11px;padding:0 14px 18px}.card{background:#fffdf4;border:2px solid #9b745e;border-radius:18px;padding:13px;box-shadow:0 5px 0 #6d49391f}.card header span,.badge{font-size:10px;background:#e0edcf;border-radius:99px;padding:4px 7px}.card p{font-size:12px;line-height:1.5;margin:7px 0}.friend{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:9px}.face{width:48px;height:48px;border-radius:15px;background:#cce4c5;display:grid;place-items:center;font-size:25px;border:2px solid #8b6551}.role{font-size:10px;color:#8b6959}.friend button{border:0;background:#f0c86e;border-radius:13px;padding:8px}.season{background:#f2c46b;padding:6px 9px;border-radius:999px}.wardrobe-stage{margin:0 14px 10px;height:230px;border:2px solid #8b634f;border-radius:22px;background:radial-gradient(circle,#fff8e2 0 42%,#cfe5c7 43%);display:grid;place-items:center;position:relative}.wardrobe-stage span{position:absolute;bottom:12px;background:#fff8e8;border:2px solid #8c6651;border-radius:999px;padding:5px 10px;font-size:11px}.item-grid{padding:2px 14px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.item{min-height:100px;border:2px solid #9c7965;border-radius:17px;background:#fffdf6;padding:8px;display:grid;place-items:center}.item.on{outline:4px solid #77a46d;background:#e6f1db}.item.locked{filter:saturate(.6)}.item i{font-style:normal;font-size:30px}.item b{font-size:11px}.item small{font-size:9px}.shop-hero{margin:0 14px 13px;border-radius:22px;border:2px solid #7f5947;padding:18px;background:linear-gradient(135deg,#f1b999,#f6d986);box-shadow:var(--shadow)}.shop-hero>*{display:block}.shop-hero b{font-size:20px}.shop-hero p{font-size:11px;margin-bottom:0}.product-grid{grid-template-columns:1fr 1fr}.product .product-art{height:95px;border-radius:13px;background:#e6edcf;display:grid;place-items:center;font-size:48px}.product button,.card .action{width:100%;border:2px solid #74503f;background:#efc268;border-radius:12px;padding:8px;font-weight:900}.dock{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);height:75px;padding:6px 7px calc(6px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:#fff9e8f4;border-top:2px solid #a98064;backdrop-filter:blur(8px)}.dock button{border:0;background:transparent;border-radius:14px;font-size:21px}.dock span{display:block;font-size:10px}.dock button.on{background:#dcebcf;color:#396246;font-weight:900}.toast{position:fixed;z-index:50;left:50%;bottom:90px;transform:translate(-50%,20px);background:#553a31;color:white;padding:10px 15px;border-radius:999px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.sheet{position:fixed;inset:0;z-index:40;background:#4e382c66;display:flex;align-items:flex-end;justify-content:center}.sheet[hidden]{display:none}.sheet-card{width:min(100%,480px);max-height:85dvh;overflow:auto;background:#fff9e8;border:3px solid #6e4b3c;border-bottom:0;border-radius:26px 26px 0 0;padding:16px}.sheet-card>header{display:flex;justify-content:space-between;align-items:center}.sheet-card h2{margin:0}.sheet-card header button{border:0;background:#ead6b5;border-radius:50%;width:34px;height:34px;font-size:22px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.profile-grid div{background:#fffdf5;border:2px solid #a37d65;border-radius:14px;padding:10px}.profile-grid span{display:block;font-size:10px}.notice{border-left:5px solid #df916f;background:#fffdf5;padding:10px;margin:9px 0;border-radius:12px}.offline{filter:grayscale(.25)}@media(min-width:600px){body{padding:24px}.app{min-height:calc(100dvh - 48px);border:3px solid #6d4939;border-radius:28px;box-shadow:var(--shadow)}.dock{bottom:24px;border-radius:0 0 25px 25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}