:root{color-scheme:dark;--control-size:1;font-family:system-ui,-apple-system,sans-serif;color:#f1e7d2;background:#07121d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;touch-action:none}
button,input{font:inherit}
button{color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}
button:focus-visible,a:focus-visible{outline:3px solid #f0d4ac;outline-offset:3px}
#stage{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#07121d}
#game{display:block;width:100%;height:100%;object-fit:fill;background:#081724;touch-action:none}
.topbar{position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:19px;background:#0d1a28ad;border:1px solid #d8d9d04a;backdrop-filter:blur(13px);box-shadow:0 9px 30px #02091280}
.topbar button{width:46px;height:46px;border:1px solid #d2d5d369;border-radius:13px;background:#d8e7e918;font-size:24px;line-height:1}
.topbar .brand{font:700 13px Georgia,serif;letter-spacing:.17em;white-space:nowrap;padding:0 10px}
.topbar .brand i{font-style:normal;color:#d9bb97}
#pad-status{font:800 10px system-ui;letter-spacing:.1em;color:#b7bec2;white-space:nowrap;padding:7px 8px;border-radius:9px;background:#ffffff0e}
#pad-status.connected{color:#d6e9cf;background:#89a87a2e}
.controls{position:absolute;z-index:4;bottom:max(15px,env(safe-area-inset-bottom));left:max(17px,env(safe-area-inset-left));right:max(17px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;transition:opacity .3s ease}
.controls button{pointer-events:auto;display:grid;place-items:center;border:1px solid #f3f6ed83;background:linear-gradient(150deg,#e4f2f438,#c9e5ea10);box-shadow:inset 0 1px 0 #ffffff55,0 7px 24px #0009;color:#f5f2e7;text-shadow:0 2px 9px #000;font-weight:900;font-size:27px;backdrop-filter:blur(11px) saturate(1.05);-webkit-backdrop-filter:blur(11px) saturate(1.05);opacity:.72;transition:transform .08s,opacity .08s,background .08s}
.controls button.held,.controls button:active{transform:scale(.92);opacity:1;background:#cbeee883}
.move-controls{display:grid;grid-template-columns:repeat(3,72px);grid-template-rows:repeat(2,72px);gap:7px;transform:scale(var(--control-size));transform-origin:left bottom}
.move-controls button{width:72px;height:72px;border-radius:20px}
.move-controls .interact{grid-column:2;grid-row:1;background:linear-gradient(150deg,#f6e1b447,#d1bc8024)}
.move-controls .left{grid-column:1;grid-row:2}
.move-controls .down{grid-column:2;grid-row:2}
.move-controls .right{grid-column:3;grid-row:2}
.action-controls{display:grid;grid-template-columns:repeat(4,74px);grid-template-rows:repeat(2,73px);gap:8px;transform:scale(var(--control-size));transform-origin:right bottom;align-items:end}
.action-controls button{width:70px;height:70px;border-radius:50%}
.action-controls .heal{grid-column:1;grid-row:1;width:55px;height:55px;font-size:28px;justify-self:end;color:#f4d6b5}
.action-controls .skill{grid-column:2;grid-row:1;font-size:31px;color:#c9eff1}
.action-controls .guard{grid-column:3;grid-row:1;font-size:31px;color:#e5e9dd}
.action-controls .jump{grid-column:4;grid-row:1;font-size:31px;background:linear-gradient(150deg,#a9d1e058,#a4b2c02b)}
.action-controls .dash{grid-column:2;grid-row:2;font-size:31px}
.action-controls .attack{grid-column:3 / span 2;grid-row:2;justify-self:end;width:105px;height:105px;font-size:46px;background:linear-gradient(150deg,#fae1bd72,#b7906f35);border-color:#f6ddbbbf}
body.pad-only .controls{opacity:0;pointer-events:none}
body.pad-only .controls button{pointer-events:none}
#overlay,.modal{position:absolute;z-index:7;inset:0;display:grid;place-items:center;padding:18px;background:#05101cc7;backdrop-filter:blur(10px)}
#overlay[hidden],.modal[hidden]{display:none}
.dialog,.modal-card{width:min(600px,94vw);max-height:93dvh;overflow:auto;padding:32px;border-radius:22px;background:linear-gradient(150deg,#1c3140f0,#101d2cfa 67%,#0a1723fa);border:1px solid #d0d4d174;box-shadow:0 22px 90px #000d,inset 0 1px 0 #ffffff25}
.dialog{text-align:center;background:linear-gradient(160deg,#08121edb,#0c1a29f2 58%,#081420fa),url('./assets/moonbridge.webp') center/cover}
.eyebrow,.modal-head small{color:#d6bd98;font-size:10px;font-weight:900;letter-spacing:.23em}
.dialog h1{font:700 clamp(36px,5vw,58px)/1.06 Georgia,serif;margin:21px 0 14px;color:#f3e7cc;letter-spacing:.06em}
.dialog p,.modal-card p{font-size:15px;line-height:1.55;color:#c8d1d0}
.dialog .hint{font-size:12px;color:#aec2c2}
.dialog .offline-status{margin:17px auto 0;max-width:440px;padding:9px 13px;border-radius:10px;background:#0a1e2bc7;border:1px solid #a9d8d578;color:#d1eee7;font-size:12px;font-weight:700}
.dialog button{display:block;margin:13px auto 0;min-width:190px;min-height:49px;padding:11px 24px;border-radius:12px;font-size:13px;font-weight:900;letter-spacing:.09em}
.primary{background:#e7d2b0;color:#142130;border:0;box-shadow:0 6px 0 #9c8065}
.secondary{background:#ffffff12;color:#e9e2d5;border:1px solid #c9d2cc70}
.admin-link{display:inline-block;color:#d6ccba;font-size:11px;font-weight:800;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid #cfbd9f7d;padding:8px 3px;margin-top:13px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:15px}
.modal-head h2{font:700 30px Georgia,serif;color:#f3e4ca;margin:3px 0 0}
.modal-head button{width:45px;height:45px;border:1px solid #d1d6d17a;border-radius:12px;background:#ffffff13;font-size:27px}
.map-card{width:min(1190px,97vw);padding:23px}
.map-card canvas{display:block;width:100%;height:auto;max-height:72dvh;margin-top:16px;border-radius:11px;border:1px solid #b5c8ca63}
.map-card p{font-size:12px;margin:9px 2px 0}
.inventory-card,.settings-card{width:min(620px,93vw)}
.inventory-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #d4dad33b;padding:10px 2px;font-size:14px}
.inventory-row b{color:#e9d6ad;text-align:right}
.inventory-card h3{margin:24px 0 10px;color:#f1d3a7;font:700 17px Georgia,serif;letter-spacing:.08em}
.inventory-card .inventory-tip{margin:8px 0;color:#a9c1c4;font-size:12px}
.forge-button,.charm-button{width:100%;border:1px solid #b9d0c27d;background:#d2dfd51a;color:#f3e5d0;border-radius:12px;padding:12px;text-align:left}
.forge-button{font-weight:850;text-align:center}
.forge-button:disabled{opacity:.5}
.charm-button{display:flex;align-items:center;gap:8px;margin:7px 0}
.charm-button.active{background:#8cb6a441;border-color:#d7ecc5aa}
.charm-button b{min-width:135px}.charm-button span{flex:1;color:#c8d6d1;font-size:12px}.charm-button strong{font-size:10px;letter-spacing:.05em;color:#ecd8b4}
.settings-card label{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:25px 0;font-weight:750}
.settings-card input[type=range]{width:52%;accent-color:#d7bd9d}
.settings-card input[type=checkbox]{width:26px;height:26px;accent-color:#d7bd9d}
.save-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:23px}
.save-tools button{flex:1;min-width:175px;min-height:48px;padding:9px 14px;border-radius:11px;border:1px solid #d2d6ca88;background:#c9dbc91c;font-size:12px;font-weight:850;letter-spacing:.04em}
.save-tools button:active{background:#d3e4d555}
@media(max-width:800px){.topbar .brand{display:none}.topbar button{width:42px;height:42px}
  .controls{left:7px;right:7px;bottom:max(8px,env(safe-area-inset-bottom))}
  .move-controls{grid-template-columns:repeat(3,57px);grid-template-rows:repeat(2,57px);gap:4px}
  .move-controls button{width:57px;height:57px;border-radius:15px;font-size:22px}
  .action-controls{grid-template-columns:repeat(4,54px);grid-template-rows:repeat(2,55px);gap:4px}
  .action-controls button{width:53px;height:53px;font-size:22px}
  .action-controls .heal{width:44px;height:44px;font-size:22px}
  .action-controls .attack{width:74px;height:74px;font-size:34px}
  .dialog,.modal-card{padding:19px}
}
@media(max-height:560px){.move-controls{grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,54px)}
  .move-controls button{width:54px;height:54px}.action-controls{grid-template-rows:repeat(2,52px)}
  .action-controls button{height:50px;width:50px}.action-controls .attack{height:75px;width:75px}
  .topbar{top:5px}.topbar button{height:37px;width:37px}}
@media(prefers-reduced-motion:reduce){.controls,.controls button{transition:none}}