:root{--ink:#3a2c3f;--ink-soft:#6a5a72;--panel:#fdfbff;--panel-2:#f3eefa;--line:#b9a9d0;--title-a:#a8c8f0;--title-b:#7aa4e0;--pink:#ff8fc0;--pink-d:#e0609a;--gold:#ffd84a;--font:Verdana , Tahoma , "Segoe UI" , sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font: 11px/1.45 var(--font);color:var(--ink);background:linear-gradient(180deg,#ffd6e8 0%,#d9e4ff 55%,#c6f0ff 100%);user-select:none}input,button{font:inherit;color:inherit}.hidden{display:none!important}.muted{color:var(--ink-soft)}.center{text-align:center}kbd{display:inline-block;padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:#fff;font: 10px var(--font)}#bg-petals{position:fixed;inset:0;pointer-events:none;z-index:0}#loading{position:fixed;inset:0;display:grid;place-items:center;font-size:14px}.screen{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}#screen-game{display:block;background:#2a2342}#screen-game.hidden{display:none}#world{position:absolute;inset:0;display:block}#ui{position:absolute;inset:0;pointer-events:none}#ui>*{pointer-events:auto}.logo{text-align:center}.logo h1{margin:0;font:900 64px/1 "Trebuchet MS",Verdana,sans-serif;letter-spacing:1px;color:#fff;-webkit-text-stroke:3px #b0407a;text-shadow:0 5px 0 #b0407a , 0 10px 24px rgba(176,64,122,.35)}.logo h1 span{display:block;font-size:34px;color:#fff3a8;-webkit-text-stroke:2px #5a4aa0;text-shadow:0 4px 0 #5a4aa0;margin-top:6px;letter-spacing:6px}.logo-sub{font-size:13px;color:#8a5aa8;letter-spacing:3px;margin-bottom:10px;font-weight:bold}.panel,.win{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 0 rgba(255,255,255,.8) inset , 0 6px 22px rgba(60,30,90,.28);overflow:hidden}.panel-title,.win-title{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;font-weight:bold;color:#fff;background:linear-gradient(180deg,var(--title-a),var(--title-b));text-shadow:0 1px 0 rgba(30,50,110,.6);border-bottom:1px solid #6a90c8}.panel-title{padding:7px 12px;font-size:13px}.panel-body{padding:14px 16px}.win{position:absolute;min-width:160px}.win-title{cursor:move}.win-body{padding:8px;max-height:70vh;overflow:auto;background:linear-gradient(180deg,var(--panel),var(--panel-2))}.win-close{width:16px;height:16px;line-height:13px;padding:0;border:1px solid #fff;border-radius:4px;background:rgba(255,255,255,.25);color:#fff;cursor:pointer;font-weight:bold}.win-close:hover{background:#ff8fa8}label{display:block;margin-bottom:10px;font-weight:bold}label input, .create-form input:not([type=number]) {display:block;width:100%;margin-top:3px;padding:6px 8px;font-weight:normal;border:1px solid var(--line);border-radius:6px;background:#fff;user-select:text}input:focus{outline:2px solid var(--pink);outline-offset:0}.login-panel{width:300px}.row{display:flex;gap:8px;align-items:center}.row.center{justify-content:center}.hint{color:var(--ink-soft);margin:10px 0 0}.err{color:#d0304a;min-height:16px;margin-bottom:6px;font-weight:bold}.btn{padding:5px 14px;border:1px solid #8a9ac8;border-radius:12px;cursor:pointer;background:linear-gradient(180deg,#fff,#e4ebfb);font-weight:bold;color:var(--ink);box-shadow:0 1px 0 #fff inset}.btn:hover{background:linear-gradient(180deg,#fff,#d6e2ff)}.btn.primary{border-color:var(--pink-d);color:#fff;background:linear-gradient(180deg,#ffadd2,var(--pink-d));text-shadow:0 1px 0 rgba(120,20,60,.5)}.btn.primary:hover{background:linear-gradient(180deg,#ffc0dc,#ea6aa6)}.btn.small{padding:2px 10px;font-size:10px}.link{border:0;background:none;color:var(--ink-soft);cursor:pointer;text-decoration:underline;padding:0}.create-panel{width:min(760px,96vw)}.create-body{display:flex;gap:18px}.create-preview{flex:0 0 230px;display:flex;flex-direction:column;gap:8px;padding:6px;background:radial-gradient(circle at 50% 70%,#fff 0%,#ffe3ef 60%,#e2dcff 100%);border-radius:10px;border:1px solid var(--line)}.create-form{flex:1;min-width:0}.picker{display:flex;align-items:center;gap:8px;margin-bottom:6px}.picker-label{flex:0 0 90px;font-weight:bold}.picker-opts{display:flex;flex-wrap:wrap;gap:4px}.swatch{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}.swatch.active{box-shadow:0 0 0 2px var(--pink-d);transform:scale(1.12)}.chip{padding:2px 8px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}.chip.active{background:var(--pink);color:#fff;border-color:var(--pink-d);font-weight:bold}.sub-title{font-weight:bold;margin:10px 0 4px}.sub-title span{color:var(--pink-d)}.alloc-row{display:grid;grid-template-columns:80px 1fr 20px 26px 20px;align-items:center;gap:4px;padding:2px 0}.alloc-row small{color:var(--ink-soft)}.alloc-row b{text-align:center;font-size:13px}.stat-plus{width:20px;height:18px;padding:0;border:1px solid #8a9ac8;border-radius:4px;cursor:pointer;background:linear-gradient(180deg,#fff,#dfe7fb);font-weight:bold;line-height:1}.stat-plus:disabled{opacity:.35;cursor:default}.hud{left:10px;top:10px;width:270px}.hud .win-title{cursor:default}.hud-row{display:flex;gap:8px}.hud-portrait{width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 40%,#fff,#ffe0ee);flex:0 0 auto}.hud-portrait canvas{width:64px;height:64px}.hud-bars{flex:1}.bar-label{display:flex;justify-content:space-between;font-size:10px;font-weight:bold}.bar-label span{font-weight:normal;color:var(--ink-soft)}.bar{height:7px;background:#40354a;border-radius:4px;overflow:hidden;margin-bottom:2px;box-shadow:0 1px 0 #fff}.bar div{height:100%;transition:width .25s;border-radius:4px}.bar.hp div{background:linear-gradient(180deg,#8ff0a8,#3cc86a)}.bar.hp.low div{background:linear-gradient(180deg,#ff9f9f,#e04a4a);animation:pulse .8s infinite alternate}.bar.sp div{background:linear-gradient(180deg,#9fd4ff,#3a8ae0)}.bar.exp div{background:linear-gradient(180deg,#fff3a8,#f0b830)}@keyframes pulse { to { opacity: .55; } }.hud-yen{margin:5px 0;font-weight:bold;display:flex;align-items:center;gap:3px}.yen-ico{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--gold);color:#8a5a00;font-size:10px;border:1px solid #c09020}.hud-buff{margin-left:auto;color:#3a7ae0}.hud-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.hud-menu button{padding:3px 0;border:1px solid #a9b6dc;border-radius:6px;background:linear-gradient(180deg,#fff,#e8eefc);cursor:pointer;font-size:10px;font-weight:bold}.hud-menu button:hover{background:linear-gradient(180deg,#fff,#ffd9ea);border-color:var(--pink)}.hud-foot{text-align:right;margin-top:4px}.minimap{right:10px;top:10px;width:210px}.minimap .win-title{cursor:default}.minimap canvas{display:block;margin:4px;background:#2a2342;border-radius:6px;cursor:pointer}.mm-pos{font-weight:normal;font-size:10px;opacity:.85}.chat{left:10px;bottom:10px;width:min(440px,46vw);background:rgba(30,22,44,.62);border-color:rgba(255,255,255,.25);box-shadow:0 4px 16px rgba(0,0,0,.3)}.chat-log{height:150px;overflow-y:auto;padding:6px 8px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.8);user-select:text}.chat-line{word-wrap:break-word}.chat-line.c-sys{color:#e0e6ff}.chat-line.c-err{color:#ff9a9a}.chat-line.c-loot{color:#ffc6e2}.chat-line.c-quest{color:#9ff0ff}.chat-line.c-gold{color:#ffe27a;font-weight:bold}.chat-line.c-player{color:#fff}.chat-line.c-me{color:#fff3a8}.chat-form input{width:100%;border:0;border-top:1px solid rgba(255,255,255,.2);padding:6px 8px;background:rgba(255,255,255,.12);color:#fff;outline:none;user-select:text}.chat-form input::placeholder{color:rgba(255,255,255,.55)}.chat-form input:focus{background:rgba(255,255,255,.95);color:var(--ink)}.hotbar{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px;background:rgba(253,251,255,.92);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(60,30,90,.3)}.hb-slot{position:relative;width:40px;height:40px;border-radius:7px;border:1px solid #b9b0d0;cursor:pointer;background:linear-gradient(180deg,#fff,#ece6f6);display:grid;place-items:center}.hb-slot:nth-child(4) {margin-right:8px}.hb-slot:hover{border-color:var(--pink-d);background:linear-gradient(180deg,#fff,#ffe0ee)}.hb-slot.locked,.hb-slot.empty{opacity:.4}.hb-key{position:absolute;left:3px;top:0;font-size:9px;font-weight:bold;color:var(--ink-soft)}.hb-qty{position:absolute;right:3px;bottom:0;font-size:9px;font-weight:bold;text-shadow:0 0 2px #fff , 0 0 2px #fff}.skill-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:#fff;border:2px solid #fff;box-shadow:0 0 0 1px var(--ink);text-shadow:0 1px 1px rgba(0,0,0,.5);flex:0 0 auto}.skill-ico.fury{background:radial-gradient(circle at 35% 30%,#ffb08a,#e0503a)}.skill-ico.sparkle{background:radial-gradient(circle at 35% 30%,#ffd0f0,#b060e0)}.skill-ico.cheer{background:radial-gradient(circle at 35% 30%,#ffd0e0,#ff5f8f)}.skill-ico.guard{background:radial-gradient(circle at 35% 30%,#c0e8ff,#3a8ae0);font-size:13px}.tabs{display:flex;gap:2px;margin-bottom:6px}.tab{flex:1;padding:3px;border:1px solid var(--line);border-radius:6px 6px 0 0;background:#ece6f6;cursor:pointer;font-weight:bold}.tab.active{background:#fff;border-bottom-color:#fff;color:var(--pink-d)}.inv-grid{display:grid;grid-template-columns:repeat(7,40px);gap:3px;justify-content:center}.inv-slot{position:relative;width:40px;height:40px;border-radius:6px;border:1px solid #c9bfdc;background:linear-gradient(180deg,#fff,#f1ecf8);display:grid;place-items:center;cursor:pointer}.inv-slot:hover{border-color:var(--pink-d)}.inv-slot.empty{cursor:default;background:#efeaf6}.inv-slot.equipped{background:linear-gradient(180deg,#fffbe0,#ffefaa);border-color:#e0b830}.inv-slot .qty{position:absolute;right:2px;bottom:0;font-size:9px;font-weight:bold;text-shadow:0 0 2px #fff , 0 0 2px #fff , 0 0 2px #fff}.eq-badge{position:absolute;left:2px;top:0;font-size:8px;font-weight:bold;color:#b08000}.inv-foot{display:flex;justify-content:space-between;margin-top:6px;font-weight:bold}.icon{image-rendering:auto;pointer-events:none}.tooltip{position:fixed;z-index:9999;width:250px;padding:7px 9px;pointer-events:none;background:rgba(253,251,255,.97);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(60,30,90,.35)}.tt-name{font-weight:bold;font-size:12px;color:#5a4aa0}.tt-type{color:var(--ink-soft);font-size:10px;margin-bottom:3px}.tt-stats{color:#2a8a50;font-weight:bold;margin-bottom:3px}.tt-desc{font-style:italic}.tt-extra{margin-top:4px;color:var(--pink-d);font-size:10px}.stat-grid{display:grid;gap:2px}.stat-row{display:grid;grid-template-columns:1fr 50px 22px;align-items:center;padding:2px 4px;border-radius:5px}.stat-row:nth-child(odd) {background:rgba(185,169,208,.14)}.stat-name{font-weight:bold}.stat-val{text-align:right;padding-right:6px;font-weight:bold}.stat-val .bonus{color:#2a8a50;font-weight:normal}.points{margin:6px 4px;font-weight:bold;color:var(--pink-d)}.derived{display:grid;grid-template-columns:1fr 1fr;gap:1px 12px;padding:6px;border-top:1px dashed var(--line)}.drow{display:flex;justify-content:space-between}.equip-wrap{display:flex;align-items:center;justify-content:space-between;gap:6px}.equip-col{display:flex;flex-direction:column;gap:10px;width:90px}.equip-slot{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.equip-label small{color:var(--ink-soft)}.equip-label div{font-weight:bold;font-size:10px}.equip-preview{background:radial-gradient(circle at 50% 70%,#fff,#ffe3ef 70%,transparent 71%)}.skill-row{display:flex;gap:8px;padding:6px;border-radius:8px;cursor:pointer;align-items:flex-start}.skill-row:hover{background:#ffe9f3}.skill-row.locked{opacity:.5;cursor:default}.skill-name{font-weight:bold;color:#5a4aa0}.skill-meta{font-size:10px;color:var(--ink-soft)}.quest{padding:7px 8px;margin-bottom:6px;border:1px solid var(--line);border-radius:8px;background:#fff}.quest.ready{border-color:#3cc86a;background:#f0fff4}.quest-name{font-weight:bold;color:#5a4aa0;font-size:12px}.quest.ready .quest-name{color:#2a8a50}.quest-area{font-size:10px;color:var(--ink-soft);margin-bottom:3px}.quest-obj{font-weight:bold}.quest-obj.done{color:#2a8a50;text-decoration:line-through}.quest-reward{margin-top:3px;color:#b07a00;font-size:10px}.quest-done summary{cursor:pointer;font-weight:bold;margin:4px 0}.shop-disc{color:var(--pink-d);font-weight:bold;margin-bottom:4px}.shop-row{display:flex;align-items:center;gap:8px;padding:3px;border-bottom:1px dashed #e0d6ee}.shop-info{flex:1}.shop-name{font-weight:bold}.shop-price{color:#b07a00}.shop-qty{width:42px;padding:2px;border:1px solid var(--line);border-radius:4px}.dialog{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);width:min(560px,92vw);background:rgba(253,251,255,.97);border:2px solid #8aa8e0;border-radius:12px;padding:10px 14px 12px;box-shadow:0 8px 28px rgba(40,20,70,.45);z-index:5000}.dlg-name{font-weight:bold;color:#3a6ad0;font-size:12px;margin-bottom:4px}.dlg-text{font-size:12px;line-height:1.6;min-height:38px;cursor:pointer;user-select:text}.dlg-opts{display:flex;flex-direction:column;gap:3px;margin-top:8px}.dlg-opt{text-align:left;padding:5px 10px;border:1px solid #c9bfdc;border-radius:8px;cursor:pointer;background:linear-gradient(180deg,#fff,#f1ecf8);font-size:11px}.dlg-opt:hover{border-color:var(--pink-d);background:linear-gradient(180deg,#fff,#ffe0ee)}.dlg-opt.locked{opacity:.5;cursor:not-allowed;text-decoration:line-through}.dlg-opt.stat-str{border-left:4px solid #e0503a}.dlg-opt.stat-agi{border-left:4px solid #3cc86a}.dlg-opt.stat-int{border-left:4px solid #3a8ae0}.dlg-opt.stat-cha{border-left:4px solid #ff5f8f}.dlg-opt.stat-sou{border-left:4px solid #9a6ae3}.help p{margin:0 0 7px}.help .y{color:#d0a000}.help .g{color:#2a8a50}.tag{color:var(--pink-d);font-weight:bold}#zone-banner{position:absolute;top:22%;left:0;right:0;text-align:center;pointer-events:none;opacity:0;font:900 34px "Trebuchet MS",Verdana,sans-serif;color:#fff;-webkit-text-stroke:1.5px #b0407a;text-shadow:0 3px 0 #b0407a , 0 8px 20px rgba(0,0,0,.4);letter-spacing:2px}#zone-banner.show{animation:banner 3.2s ease-out forwards}@keyframes banner {
  0% { opacity: 0; transform: translateY(14px) scale(.95); }
  15% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#c9bfdc;border-radius:4px}