@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--bg:#110b19;--panel:#1e162a;--panel2:#291b35;--line:#533757;--pink:#ff58b8;--gold:#f8cd68;--white:#fff5f0;--muted:#cbbbd1;--teal:#8bdac9;font-family:'DM Sans',system-ui,sans-serif;color:var(--white);background:var(--bg)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 52% -10%,#70365c 0,#24152c 32%,#110b19 75%)}button,a{touch-action:manipulation}button{font:800 13px 'DM Sans',sans-serif;border:1px solid #6a466d;background:#342640;color:#fff;cursor:pointer;border-radius:9px;padding:10px 12px}button:hover{filter:brightness(1.17)}button:active{transform:scale(.97)}button:focus-visible,a:focus-visible{outline:3px solid #fff49c;outline-offset:2px}a{color:#ffb5da;text-decoration:none}a:hover{text-decoration:underline}.nav{border-bottom:1px solid #ffffff18;background:#100b17bc;padding:13px clamp(15px,3vw,46px);display:flex;justify-content:space-between;align-items:center;gap:15px}.brand{font:900 25px 'Barlow Condensed',sans-serif;letter-spacing:.045em;color:#fff}.brand span{color:var(--pink)}.brand b{font-size:14px;border:1px solid var(--gold);border-radius:4px;padding:2px 5px;color:var(--gold);margin-left:7px}.nav-links{display:flex;gap:20px;font-size:12px;font-weight:800}.nav-links a{color:#e9d3e4}.layout{max-width:1380px;margin:auto;padding:0 18px}.intro{position:relative;min-height:246px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:19px 14px 17px;overflow:hidden}.intro:after{content:'';position:absolute;z-index:-1;left:40%;right:0;top:0;bottom:0;background:radial-gradient(ellipse at center,#c44ba847,transparent 70%)}.eyebrow{font:900 12px 'DM Sans',sans-serif;letter-spacing:.17em;color:var(--gold)}.eyebrow.compact{font-size:10px}h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',sans-serif}h1{font-size:clamp(49px,7vw,91px);line-height:.88;margin:13px 0 16px;letter-spacing:.006em;max-width:820px;text-shadow:0 5px 20px #05050a65}h1 small{font-size:.46em;color:var(--gold)}h1 em{font-style:normal;color:var(--pink)}.intro p{color:#e8d5e8;max-width:710px;margin:0 0 18px;line-height:1.55;font-size:14px}.intro p strong{color:#fff}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{border:1px solid #805676;background:#25182c99;color:#ffe5f4;border-radius:99px;padding:6px 11px;font-size:10px;font-weight:900;letter-spacing:.06em}.portrait{width:175px;height:188px;flex:none;position:relative;border:2px solid #d6589d;border-radius:16px;overflow:hidden;box-shadow:0 0 42px #ec55a82e;background:#261b30}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}.portrait-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#170c24f5);padding:27px 10px 9px;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 4px #000}.portrait-label b{font:900 16px 'Barlow Condensed',sans-serif}.portrait-label small{font-size:10px;color:#ffe4f5}.hud{display:grid;grid-template-columns:1.3fr 1.4fr 1.2fr .8fr .9fr auto;gap:6px;padding:13px;border-radius:13px;border:1px solid #754979;background:linear-gradient(120deg,#3c2448,#1c1729);box-shadow:0 12px 35px #0b07125d;margin-bottom:14px}.hud>div{display:flex;flex-direction:column;gap:2px;padding:3px 12px;border-right:1px solid #ffffff24;min-width:0}.hud small{font-size:10px;color:#baa9c0;font-weight:900;letter-spacing:.1em}.hud strong{font:900 19px 'Barlow Condensed';white-space:nowrap}.meter{height:4px;background:#634b68;border-radius:10px;width:95%;margin-top:3px}.meter i{display:block;width:100%;height:100%;border-radius:10px;background:linear-gradient(90deg,#f779a1,#ff3d8b)}#energy-bar{background:linear-gradient(90deg,#87e0b6,#bfe6a6)}.hud button{font-size:12px;background:#68445f}.play-area{display:grid;grid-template-columns:minmax(0,1.86fr) minmax(300px,.85fr);gap:14px;align-items:stretch}.game-panel,.side-panel{background:linear-gradient(150deg,#21192c,#191420);border:1px solid #59375c;border-radius:15px;box-shadow:0 18px 45px #0907105b;overflow:hidden}.panel-top{padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#23172d}.panel-top h2{font-size:31px;line-height:1;margin:4px 0}.panel-top span{font-size:12px;color:var(--muted)}.zone-actions{display:flex;gap:7px}.zone-actions button{white-space:nowrap}.canvas-frame{position:relative;background:#385c59;overflow:hidden;line-height:0}canvas{display:block;width:100%;height:auto;aspect-ratio:14 / 9;touch-action:none;cursor:crosshair;image-rendering:auto}.start-screen{position:absolute;inset:0;background:linear-gradient(120deg,#160e2ce8,#4f2054d9);display:flex;justify-content:center;align-items:center;padding:12px;line-height:normal;backdrop-filter:blur(3px)}.start-screen[hidden]{display:none}.overlay-inner{text-align:center;max-width:420px}.start-stamp{color:var(--gold);font-size:11px;letter-spacing:.2em;font-weight:900}.overlay-inner h2{font-size:clamp(40px,7vw,83px);line-height:.87;letter-spacing:.02em;margin:12px 0 16px}.overlay-inner h2 span{color:#ff61b1}.overlay-inner p{line-height:1.45;color:#fae8f5;font-size:14px}.cta{background:var(--pink);color:#2b0e20;border-color:#ffb3dc;box-shadow:0 4px #822451;border-radius:9px;margin:15px auto 9px;font-size:16px;padding:12px 22px}.overlay-inner small{display:block;color:#e5c8e4}.game-bottom{padding:11px 15px 13px;background:#22182c}.game-bottom #message{font-size:13px;min-height:25px;color:#eecb9e;font-weight:700;line-height:1.3}.controls{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}.move-buttons{display:flex;flex-direction:column;align-items:center;gap:3px}.move-buttons>div{display:flex;gap:4px}.move-buttons button{width:39px;height:34px;padding:5px;background:#53365a;border-color:#885c83;touch-action:none;user-select:none}.move-buttons button:active{background:#a66b9a}.action-buttons{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.action-buttons button{min-height:42px}.action-buttons .gold{background:#c18a39;color:#180c16;border-color:#f3c977}.action-buttons .pink{background:#e44c89;color:#1e0914;border-color:#f7a5c7}.action-buttons kbd{font-size:10px;color:#ffffffbe;display:inline-block;margin-left:5px}.side-panel{display:flex;flex-direction:column;min-height:650px}.side-tabs{display:flex;background:#2b1b33;border-bottom:1px solid #805378;overflow:auto;scrollbar-width:thin}.side-tabs button{background:none;border:0;border-radius:0;padding:17px 12px;font-size:11px;letter-spacing:.06em;min-width:max-content;flex:1;border-bottom:3px solid transparent}.side-tabs button.active{color:#ffacd7;background:#452e48;border-bottom-color:#ff64ae}.sidebar-body{flex:1;padding:17px;max-height:515px;min-height:365px;overflow:auto}.sidebar-body h3{font-size:23px;color:#fff;margin:0 0 9px}.quest,.skill,.item-row,.recipe,.lore{background:#2c2036;border:1px solid #523954;border-radius:10px;padding:12px;margin-bottom:10px}.quest h4,.lore h4{font-size:13px;margin:0 0 5px;color:#ffe9f5}.quest p,.lore p{margin:3px 0;font-size:11px;line-height:1.55;color:#cbbad3}.quest .status{font-size:10px;color:#e8c56b;font-weight:900}.quest.done{border-color:#38886e;background:#203a37}.quest.active{border-color:#b477a5}.quest small{color:#eacfcf}.item-row,.skill{display:flex;align-items:center;justify-content:space-between;gap:10px}.item-row .item-name,.skill .skill-name{font-size:12px;font-weight:800}.item-row small,.skill small{font-size:10px;color:#b8a8c2}.item-ico{font-size:24px;margin-right:7px}.item-left{display:flex;align-items:center;gap:8px}.skill-progress{height:5px;background:#45304d;border-radius:5px;margin:7px 0 0;overflow:hidden}.skill-progress i{height:100%;background:#ff6daf;display:block}.recipe button{margin-top:8px;background:#765486}.recipe p{font-size:11px;color:#cbbbd1}.minimap{background:#261b30;border-top:1px solid #59395a;padding:12px 14px}.minimap strong{font:900 17px 'Barlow Condensed'}.region-buttons{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}.region-buttons button{padding:6px 8px;font-size:10px;background:#3b2944}.region-buttons button.selected{border-color:#f2be70;background:#6a4169;color:#fff5c8}.small{font-size:10px;color:#bcadc5;line-height:1.5}.below{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.feature{background:#24172c;padding:20px;border:1px solid #563558;border-radius:12px}.feature-icon{font-size:29px}.feature h3{font-size:24px;margin:8px 0}.feature p{font-size:12px;color:#d1bed3;line-height:1.55;margin:0}.future{padding:20px 25px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;background:linear-gradient(105deg,#442245,#181d37);border-radius:12px;border:1px solid #6e4b75;margin-top:16px}.future h2{font-size:38px;margin:9px 0}.future p{font-size:12px;line-height:1.6;color:#e8d3e2;max-width:850px}.future a{font-size:12px;font-weight:900}.future-ornament{font-size:105px;color:#ff83c8;text-shadow:0 0 44px #ff76d6}footer{display:flex;justify-content:space-between;gap:15px;padding:25px 5px;color:#ad9ab5;font-size:10px;font-weight:900}footer a{font-size:10px}.modal{position:fixed;z-index:99;inset:0;background:#0e0912c7;display:grid;place-items:center;padding:16px;backdrop-filter:blur(4px)}.modal[hidden]{display:none}.dialogue-box{border:2px solid #f1a4d2;background:linear-gradient(145deg,#402649,#1d1731);border-radius:16px;padding:24px;width:min(470px,100%);box-shadow:0 20px 90px #000b}.dialogue-box h3{font-size:34px;margin:8px 0}.dialogue-box p{font-size:14px;line-height:1.6;color:#f9e0ef}.dialog-actions{display:flex;flex-direction:column;gap:8px}.dialog-actions button{background:#b86d9e;text-align:left}.dismiss{margin-top:12px;background:transparent;border:0;color:#bba9bb;font-size:11px}.toast{position:fixed;bottom:21px;left:50%;transform:translateX(-50%);z-index:100;background:#f5bc79;color:#291b2d;padding:12px 19px;border:2px solid #fff0c8;border-radius:10px;box-shadow:0 10px 36px #0009;font-weight:900;font-size:13px;max-width:90vw;text-align:center}.toast[hidden]{display:none}
@media(max-width:1100px){.play-area{grid-template-columns:minmax(0,1fr)}.side-panel{min-height:initial}.sidebar-body{max-height:500px;min-height:240px}.hud{grid-template-columns:repeat(3,minmax(0,1fr))}.hud>div:nth-child(3){border:0}.portrait{width:145px;height:161px}}@media(max-width:650px){.layout{padding:0 9px}.nav{padding:10px}.nav-links{gap:8px;font-size:10px}.brand{font-size:20px}.brand b{font-size:10px}.intro{padding:18px 5px 13px;min-height:210px}.intro .portrait{display:none}.intro h1{font-size:clamp(43px,10vw,67px)}.intro p{font-size:12px}.chips{gap:5px}.chips span{padding:5px 7px;font-size:9px}.hud{padding:9px;gap:3px;grid-template-columns:repeat(3,1fr)}.hud>div{padding:2px 5px}.hud strong{font-size:16px}.hud small{font-size:9px}.hud button{font-size:10px}.panel-top{padding:12px 9px}.panel-top h2{font-size:24px}.panel-top span{font-size:10px}.zone-actions button{padding:7px;font-size:10px}.game-bottom{padding:10px 7px}.game-bottom #message{font-size:11px}.controls{flex-wrap:nowrap}.move-buttons button{width:35px;height:37px}.action-buttons{gap:4px}.action-buttons button{font-size:10px;padding:10px 7px;min-height:42px}.action-buttons kbd{display:none}.below{grid-template-columns:1fr;gap:9px}.feature{padding:13px}.feature-icon{display:inline-block}.feature h3{display:inline-block;margin-left:8px}.future{padding:18px}.future h2{font-size:27px}.future-ornament{display:none}footer{padding:19px 4px;flex-direction:column}.overlay-inner p{font-size:12px}.overlay-inner h2{font-size:47px;margin:7px 0}.cta{margin:8px 0}.start-screen{padding:5px}}@media(max-width:360px){.action-buttons{flex-direction:column}.action-buttons button{min-height:33px;padding:6px}.move-buttons button{width:30px;height:31px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.portrait{background:radial-gradient(circle at 50% 50%,#6f4268 0,#24162c 75%)}.portrait img{object-fit:contain;object-position:center center;padding:3px}.portrait-label{pointer-events:none}.portrait-label b{font-size:14px}@media(max-width:650px){.intro .portrait{display:block;width:96px;height:145px}.intro h1{font-size:clamp(34px,9vw,48px)}.intro{gap:7px}.intro .eyebrow{font-size:10px}.portrait-label small{font-size:8px}}