:root{--bg:#0d1030;--line:#e9d9a4;--txt:#f7f3e6;--dim:#a6aee0;--ok:#4ade80;--bad:#f87171;--gold:#fcd34d;--acc:#7cb4ff;--serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--txt);font:15px/1.35 "Trebuchet MS","Segoe UI",system-ui,sans-serif;-webkit-user-select:none;user-select:none}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#cv{position:fixed;inset:0;width:100%;height:100%}
.hidden{display:none!important}
/* 16-bit window skin */
.win{position:relative;background:linear-gradient(180deg,#4a5fcf 0,#2b3a9a 9px,#1d2670 10px,#161d5c 60%,#121850 100%);border:2px solid #f3e6b4;border-radius:7px;
  box-shadow:0 0 0 2px #140c2c,inset 0 0 0 2px #6d80f0,inset 0 3px 0 2px #93a4ff44,inset 0 -3px 0 #0c1038,0 8px 20px #000b;padding:9px 12px}
.win::before,.win::after{content:"";position:absolute;width:8px;height:8px;background:radial-gradient(circle at 35% 35%,#fff6c8,#d9a93c 55%,#7a5a14);border-radius:50%;top:-5px;box-shadow:0 0 0 1px #2a1c08}
.win::before{left:-5px}.win::after{right:-5px}
.dim{color:var(--dim)} .small{font-size:12px} .err{color:var(--bad);min-height:1.3em;margin-top:6px} .center{justify-content:center}
.tag{background:#0a0d26;border:2px solid var(--gold);color:var(--gold);padding:0 6px;border-radius:5px;font-weight:700;font-size:13px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ico{width:16px;height:16px;image-rendering:pixelated;vertical-align:middle}
.ico2{width:32px;height:32px;image-rendering:pixelated}
button{font:inherit;color:var(--txt);background:linear-gradient(#5a6ee0,#2f3ca6 55%,#27328a);border:2px solid #f3e6b4;border-radius:6px;padding:5px 12px;cursor:pointer;text-shadow:0 1px 0 #0008;box-shadow:inset 0 1px 0 #ffffff55,0 2px 0 #140c2c}
button:hover:not(:disabled){filter:brightness(1.2)} button:active:not(:disabled){transform:translateY(1px)} button:disabled{opacity:.45;cursor:default}
button.big{font-size:18px;padding:9px 20px;margin-top:8px;width:100%;font-family:var(--serif);font-weight:700;letter-spacing:.5px}
button.good{background:linear-gradient(#3fd27a,#1b8d4a 55%,#167a40)} button.bad{background:linear-gradient(#e25d5d,#a02d2d 55%,#8a2626)}
input,select{font:inherit;background:#0a0e2e;color:var(--txt);border:2px solid #5b66c4;border-radius:6px;padding:6px 8px;outline:none;box-shadow:inset 0 2px 3px #0008} input:focus{border-color:var(--gold)}
.bar{height:12px;background:#0a0d26;border:2px solid #0a0d26;outline:1px solid #6270d0;border-radius:4px;position:relative;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(#a8e1ff,#2f7de8 60%,#2563eb);transition:width .3s;box-shadow:inset 0 1px 0 #fff8}
.bar span{position:absolute;inset:0;font-size:9px;text-align:center;line-height:12px;text-shadow:0 0 3px #000}
.bar.hp i{background:linear-gradient(#b6f7c4,#22c55e 60%,#15803d)} .bar.hp.low i{background:linear-gradient(#fecaca,#ef4444 60%,#b91c1c)} .bar.ehp{height:20px} .bar.ehp i{background:linear-gradient(#fecdd3,#f43f5e 60%,#be123c)} .bar.ehp span{font-size:11px;line-height:20px}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#hud-stats{position:absolute;top:10px;left:10px;width:240px;display:flex;flex-direction:column;gap:5px}
#hud-right{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:7px;max-width:240px}
#menubtns{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end} #menubtns button{padding:4px 8px;font-size:18px}
#zonebadge{font-weight:700;color:var(--gold);font-family:var(--serif);font-size:16px}
#online{width:220px;max-height:200px;overflow:auto} #online div{display:flex;justify-content:space-between;gap:6px;padding:1px 0;border-bottom:1px dotted #5560a8} #online .mate{color:#86efac}
#banner{position:absolute;top:62px;left:50%;transform:translateX(-50%);border-color:#f97316;animation:pulse 1.2s infinite;display:flex;gap:10px;align-items:center}
@keyframes pulse{50%{box-shadow:0 0 0 2px #140c2c,0 0 22px #f97316}}
#chat{position:absolute;left:10px;bottom:10px;width:min(370px,46vw);display:flex;flex-direction:column;gap:5px;opacity:.9} #chat:focus-within{opacity:1}
#chatlog{height:100px;overflow:auto;font-size:12.5px;user-select:text} #chatlog .t{color:#86efac} #chatlog b{color:var(--gold)}
#chatin{flex:1;min-width:0;padding:3px 6px} #chat select{padding:3px}
#prompt{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);background:#000c;border:2px solid var(--gold);padding:4px 14px;border-radius:6px;font-weight:700;pointer-events:none}
#zonetitle{position:absolute;top:20%;left:0;right:0;text-align:center;font:900 44px var(--serif);color:#fff;text-shadow:0 3px 0 #2b1b6b,0 0 24px #7cb4ff,3px 3px 0 #000;letter-spacing:3px;pointer-events:none;animation:ztitle 4s forwards}
#zonetitle small{display:block;font-size:16px;letter-spacing:2px;color:var(--gold);font-weight:700}
@keyframes ztitle{0%{opacity:0;transform:translateY(-12px)}15%,75%{opacity:1;transform:none}100%{opacity:0}}
#dialog{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(700px,94vw);min-height:110px}
#dialog p{margin:6px 0 8px;font-size:16px;line-height:1.45} #dlg-name{color:var(--gold);font-family:var(--serif);font-size:17px} #dlg-btns{display:flex;gap:8px;flex-wrap:wrap}
#touch{position:absolute;inset:auto 0 12px 0;display:flex;justify-content:space-between;padding:0 14px;pointer-events:none}
#touch *{pointer-events:auto} #dpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px)} #dpad button{font-size:20px;padding:0;opacity:.8}
#dpad [data-d=up]{grid-area:1/2} #dpad [data-d=left]{grid-area:2/1} #dpad [data-d=right]{grid-area:2/3} #dpad [data-d=down]{grid-area:3/2}
#tbtn{width:70px;height:70px;border-radius:50%;font-size:24px;align-self:end;opacity:.85}
#fade{position:fixed;inset:0;background:#000;z-index:60;pointer-events:none;opacity:0;transition:opacity .35s} #fade.on{opacity:1;pointer-events:auto}

/* Panels */
#panel{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:20}
#panel-win{overflow-x:hidden;width:min(920px,96vw);max-height:92vh;overflow:auto;position:relative;padding:16px 20px}
#panel-x{position:absolute;top:8px;right:8px;padding:2px 9px;z-index:2} #panel-body h2{margin:0 0 10px;color:var(--gold);font-family:var(--serif);letter-spacing:1px} #panel-body h3{margin:14px 0 6px;color:var(--acc);font-family:var(--serif)}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap} .tabs button.on{background:linear-gradient(#ffb347,#c2710c 55%,#a85d08)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.card{background:#0c1038cc;border:2px solid #4f5cc0;border-radius:8px;padding:8px;display:flex;gap:8px;align-items:center}
.card .info{flex:1;min-width:0} .card .nm{font-weight:700} .card .ds{font-size:12px;color:var(--dim)} .card.eq{border-color:var(--ok)} .card.lock{opacity:.5}
.price{color:var(--gold);font-weight:700;white-space:nowrap} .qty{background:#000a;border-radius:4px;padding:0 5px;font-size:12px}
table.t{width:100%;border-collapse:collapse} table.t td,table.t th{padding:4px 8px;border-bottom:1px solid #3c4590;text-align:left}
.swatches{display:inline-flex;gap:4px;flex-wrap:wrap} .sw{width:24px;height:24px;border-radius:5px;border:2px solid #fff5;cursor:pointer;box-shadow:inset 0 -3px 0 #0003} .sw.on{border-color:#fff;box-shadow:0 0 8px #fff,inset 0 -3px 0 #0003}
.sw.txt{width:auto;min-width:24px;padding:0 7px;font-size:12px;line-height:20px;background:#1b2370;color:#fff;text-align:center}
.task{margin:4px 0;padding:6px 8px;background:#0c1038cc;border-left:4px solid var(--acc);font-size:14px} .done{color:var(--ok)}
.quest{display:flex;gap:10px;align-items:center;background:#0c1038cc;border:2px solid #4f5cc0;border-radius:8px;padding:7px 10px;margin:5px 0} .quest .info{flex:1} .quest.fin{border-color:var(--ok)}
.quest.bonus{border-color:var(--gold);background:linear-gradient(90deg,#3b2a0a88,#0c1038cc)}
.qbar{height:8px;margin-top:4px}

/* Title / login */
#title{position:fixed;inset:0;z-index:50;background:#0a0a20}
#tcv{position:absolute;inset:0;width:100%;height:100%}
#title-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:3vh;gap:14px}
#logo{width:min(900px,94vw);height:auto;filter:drop-shadow(0 8px 14px #000a)}
button.start{font:900 26px var(--serif);letter-spacing:4px;padding:12px 34px;margin-top:2vh;animation:blink 1.4s infinite;background:linear-gradient(#ffd45a,#d28b0d 55%,#b36f06);color:#2a1a02;text-shadow:0 1px 0 #fff8}
@keyframes blink{50%{filter:brightness(1.35);transform:scale(1.03)}}
#auth{width:min(380px,92vw);display:flex;flex-direction:column;gap:8px}
#t-foot{position:absolute;bottom:12px;text-shadow:0 1px 3px #000;font:700 15px var(--serif);color:#fff;letter-spacing:.5px}
#t-foot a{color:#ffd45a;text-decoration:none;border-bottom:1px dotted #ffd45a} #t-foot a:hover{color:#fff}

/* Editor */
#editor{position:fixed;inset:0;z-index:55;background:radial-gradient(#2a3b9a,#090c24);display:flex;align-items:center;justify-content:center;overflow:auto}
#ed-win{width:min(900px,96vw);padding:16px 22px} #ed-win h2{margin:0 0 10px;color:var(--gold);font:900 28px var(--serif);text-align:center;letter-spacing:2px}
.ed-cols{display:flex;gap:26px;flex-wrap:wrap;justify-content:center} .ed-left{display:flex;flex-direction:column;align-items:center;gap:8px;background:radial-gradient(#4a68d8,#1a2268);border-radius:10px;padding:14px;border:2px solid #7d8cf0}
#ed-prev{width:192px;height:288px;image-rendering:pixelated} .ed-right{flex:1;min-width:300px;display:flex;flex-direction:column;gap:7px}
.ed-right label{width:105px;color:var(--gold);font-weight:700;font-size:13px} .ed-right input#ed-name{flex:1;font-size:17px}

/* World map */
#worldmap{position:fixed;inset:0;z-index:25;background:#06102a}
#wmcv{position:absolute;inset:0;width:100%;height:100%}
#wm-info{position:absolute;right:14px;top:14px;width:320px;max-height:calc(100% - 28px);overflow-y:auto;overflow-x:hidden}
@media (max-width:900px){#wm-info{right:8px;left:8px;top:auto;bottom:8px;width:auto;max-height:38%}}
#wm-info h3{margin:0 0 4px;color:var(--gold);font-family:var(--serif);font-size:19px} .big-x{position:absolute;left:14px;top:14px}

/* Battle */
#battle{position:fixed;inset:0;z-index:30;background:#000;display:flex;flex-direction:column}
#bcv{position:absolute;inset:0;width:100%;height:100%}
.b-top{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:min(580px,92vw);text-align:center;pointer-events:none}
.b-top .en{font:900 22px var(--serif);text-shadow:2px 2px 0 #000,0 0 12px #000;margin-bottom:3px;letter-spacing:1px}
.b-party{position:absolute;left:10px;top:76px;display:flex;flex-direction:column;gap:7px;width:210px}
.pcard{padding:5px 8px;font-size:12.5px} .pcard.me{border-color:var(--gold)} .pcard.down{opacity:.5;filter:grayscale(1)} .pcard .ok{color:var(--ok)}
.b-box{overflow-x:hidden!important;position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(880px,98vw);padding:10px 14px;display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow:auto}
.b-q{font-size:19px;font-weight:700;line-height:1.35;min-height:2.6em}
.b-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}
.timer{height:14px} .timer i{background:linear-gradient(#b6f7c4,#22c55e);transition:width .1s linear} .timer.warn i{background:linear-gradient(#fde68a,#f59e0b)} .timer.crit i{background:linear-gradient(#fecaca,#ef4444)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px} .opt{text-align:left;padding:9px 12px;font-size:16px;display:flex;gap:8px}
.opt b{color:var(--gold)} .opt.right{background:linear-gradient(#3fd27a,#167a40)!important} .opt.wrong{background:linear-gradient(#e25d5d,#8a2626)!important} .opt.gone{visibility:hidden}
.numrow{display:flex;gap:8px} .numrow input{flex:1;font-size:20px}
.b-items{display:flex;gap:6px;flex-wrap:wrap} .bitem{padding:3px 6px;display:flex;align-items:center;gap:4px;font-size:12px}
.b-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .b-actions button{padding:10px;font-size:16px}
.b-fb{font-size:15px;padding:6px 8px;border-radius:6px;background:#0c1038cc} .b-fb.ok{border-left:5px solid var(--ok)} .b-fb.no{border-left:5px solid var(--bad)}
.b-log div{font-size:13.5px;padding:1px 0} .hit{color:#fcd34d} .ehit{color:#fca5a5} .heal{color:#86efac}
.endmodal{position:absolute;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:5}
.endmodal .win{width:min(490px,94vw);text-align:center} .endmodal h1{margin:0 0 6px;font:900 36px var(--serif);letter-spacing:2px} .endmodal .win.vic h1{color:var(--gold);text-shadow:0 0 18px #ffb347} .endmodal .win.def h1{color:var(--bad)}
.reward{font-size:18px;margin:4px 0}
#toasts{position:fixed;top:70px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:99;pointer-events:none}
.toast{background:#101640;border:2px solid var(--gold);padding:6px 14px;border-radius:8px;animation:tin .25s,tout .5s 3.2s forwards;font-weight:700;box-shadow:0 4px 12px #000a}
.toast.bad{border-color:var(--bad)} .toast.good{border-color:var(--ok)}
@keyframes tin{from{transform:translateY(-14px);opacity:0}} @keyframes tout{to{opacity:0;transform:translateY(-10px)}}
@media (max-width:760px){#hud-stats{width:175px}#online{display:none}#chat{width:52vw}#chatlog{height:60px}.opts{grid-template-columns:1fr}.b-party{width:130px;top:62px}.b-q{font-size:16px}.opt{font-size:14px;padding:7px 9px}#zonetitle{font-size:28px}}

/* Cutscenes */
#cutscene{position:fixed;inset:0;z-index:70;background:#000}
#ccv{position:absolute;inset:0;width:100%;height:100%}
#cs-box{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:min(820px,94vw);min-height:130px;padding:12px 18px 16px}
#cs-name{color:var(--gold);font:900 19px var(--serif);letter-spacing:1px} #cs-text{margin:6px 0 0;font-size:18px;line-height:1.5;min-height:3.2em} #cs-text.narr{font-style:italic;color:#e8e4ff}
#cs-next{position:absolute;right:16px;bottom:8px;color:var(--gold);animation:blink 1s infinite}
#cs-skip{position:absolute;top:calc(8% + 6px);right:16px;opacity:.85}

.opt.dbgc{outline:2px dashed #fcd34d;outline-offset:-3px}
.dbgrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}.dbgrow input[type=number]{width:90px}

.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.pathcard{background:#0c1038cc;border:2px solid #4f5cc0;border-radius:10px;padding:8px;cursor:pointer;text-align:center} .pathcard:hover{border-color:#fff} .pathcard.on{border-color:var(--gold);background:linear-gradient(#3b2a0a99,#0c1038cc);box-shadow:0 0 12px #fcd34d66}
.pathcard img{width:48px;height:48px;image-rendering:pixelated} .pathcard b{display:block;color:var(--gold)} .pathcard .small{display:block;line-height:1.25}
@media (max-width:760px){.paths{grid-template-columns:1fr}}