:root{color-scheme:dark;--gold:#d3b276;--ink:#10191b;--border:#6d6046;--muted:#a8aaa4;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}body{margin:0;background:#10191b;color:#eee9da;font:15px system-ui,sans-serif}button,input,select{font:inherit}button{color:#ece4d1;cursor:pointer;border:1px solid #5b5544;background:linear-gradient(#263031,#172020);border-radius:5px;padding:11px 16px;transition:filter .15s,transform .15s}button:hover{filter:brightness(1.25)}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:wait}input,select{width:100%;border:1px solid #50574e;background:#101819;color:#eee;padding:13px;border-radius:5px;outline:none}input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 2px #d3b27620}label{display:block;color:#c9c7bb;font-size:13px;letter-spacing:.02em}label input,label select{margin:8px 0 18px}h1,h2,h3{font-family:var(--serif);font-weight:500}h1{font-size:clamp(38px,4.5vw,70px);line-height:1.12;letter-spacing:-.035em;margin:25px 0}h2{font-size:30px;color:#eadbc0;margin:12px 0 26px}h3{color:var(--gold)}p{line-height:1.8;color:#bfc2b8}small{color:var(--muted);line-height:1.7}.eyebrow{font-size:11px;color:var(--gold);letter-spacing:.19em;font-weight:600}.brand{text-decoration:none;color:#e4c585;font:24px var(--serif);letter-spacing:.055em}.brand:first-letter{font-size:32px}.edition{font-size:10px;letter-spacing:.24em;color:#b4b5a6}nav{display:flex;align-items:center;justify-content:space-between;padding:24px 5%;border-bottom:1px solid #d4b57822;position:relative}.subtle{border:0;background:transparent;color:#babeb4}.panel,dialog{background:linear-gradient(135deg,#212b2cfa,#111a1bf5);border:1px solid #7c6d4f;box-shadow:0 16px 60px #0006,inset 0 0 0 4px #b1945620;border-radius:10px}.primary{width:100%;background:linear-gradient(#a9422e,#73291f);border:1px solid #da9a5a;color:#fff0d5;font:15px var(--serif);letter-spacing:.1em;box-shadow:inset 0 0 0 3px #482018,0 4px 10px #0004;padding:18px}.primary span{float:right}.tabs{display:flex;border-bottom:1px solid #535746;margin-bottom:25px;gap:20px}.tabs button{border:0;border-radius:0;background:none;color:#a2a99f;padding:10px 0}.tabs button.active{color:#e1bc7a;border-bottom:2px solid #cfaa69}.crest{font:45px var(--serif);color:#d2a862;margin-bottom:20px}#landing{min-height:100dvh;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 440px;gap:0 7%;padding:0 5%}#landing nav,#landing footer{grid-column:1/-1;margin:0 -5.6%}.intro{padding:85px 0 25px;z-index:1}.intro em{color:#d3b27c;font-style:normal}.intro p{font-size:17px}.features{display:flex;gap:24px;flex-wrap:wrap;margin:30px 0;color:#ccbd9f;font-size:12px}.auth{align-self:center;padding:35px 36px;z-index:1;margin:48px 0}.auth h2{font-size:31px}.auth-footer{font-size:12px;color:#c4cbb9;text-align:center;margin:24px 0 12px}.auth-footer i,.eyebrow i{display:inline-block;width:6px;height:6px;background:#90b58c;border-radius:50%;margin-right:8px}.auth small{display:block;text-align:center;font-size:11px}#authError,#characterError{color:#ffb395;font-size:13px;min-height:20px}.landscape{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 40% 60%,#667b5b35,transparent 50%),linear-gradient(160deg,#182e36,#111819 75%)}.moon{position:absolute;top:17%;left:43%;width:110px;height:110px;background:#c8c6a275;box-shadow:0 0 100px #c9cd8f35;border-radius:50%}.castle{position:absolute;top:20%;left:31%;font:280px var(--serif);color:#0b151a;text-shadow:0 0 50px #adb79325;transform:rotate(-3deg)}.ridge{position:absolute;inset:50% 0 0;background:#0d202388;clip-path:polygon(0 50%,20% 10%,35% 50%,50% 0,65% 45%,80% 20%,100% 60%,100% 100%,0 100%)}.forest{position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#061311)}.village-preview{width:330px;height:190px;position:relative;overflow:hidden;border:1px solid #8a79534d;border-radius:5px;opacity:.9;background:#132423}.village-preview img{position:absolute;width:768px;max-width:none;left:-200px;top:-190px;image-rendering:pixelated}.village-preview:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 45px #10191b}footer{display:flex;justify-content:space-between;gap:20px;align-self:end;padding:18px 5%;font-size:10px;letter-spacing:.09em;color:#8b978e;border-top:1px solid #d4b57822;z-index:1}#characters{min-height:100dvh;background:radial-gradient(at 0% 70%,#243b37,#10191b 70%);padding:25px 5%}header{display:flex;justify-content:space-between;align-items:center}.character-layout{max-width:1200px;margin:60px auto;display:grid;grid-template-columns:1fr 1fr;gap:80px}.character-layout .panel{padding:30px}.class-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}.class-options label{cursor:pointer}.class-options input{position:absolute;opacity:0;width:1px}.class-options span{display:flex;align-items:center;flex-direction:column;padding:16px 8px;border:1px solid #4b554b;border-radius:5px;font-size:26px}.class-options b{font:15px var(--serif);margin-top:12px}.class-options small{text-align:center;font-size:10px;margin-top:8px}.class-options input:checked+span{border-color:#d3b276;background:#c4a96c17}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.character-card{display:flex;align-items:center;padding:16px;border:1px solid #7a6b49;border-radius:6px;margin-top:12px;background:#1c2927;gap:20px}.character-card .card-icon{font-size:32px;color:#d3b276}.character-card b{font:20px var(--serif)}.character-card button{margin-left:auto}#game{position:fixed;inset:0;overflow:hidden;background:#13211b;touch-action:none;user-select:none}#world{width:100%;height:100%;display:block;image-rendering:pixelated}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px #0006}.hud{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));display:flex;gap:10px;background:#111919ed;padding:10px;border:1px solid #ac8f59;border-radius:8px;box-shadow:0 5px 15px #0005}.portrait{position:relative;width:55px;height:55px;border:1px solid #ad8c57;border-radius:5px;background:#25322c}.portrait b{position:absolute;right:-4px;bottom:-5px;background:#3a3525;border:1px solid #aa8b53;border-radius:4px;font-size:11px;padding:2px 5px}.vitals{width:180px}.vitals strong{font:16px var(--serif);color:#eee0c4}.bar{height:14px;position:relative;border:1px solid #101413;border-radius:3px;background:#091415;margin-top:5px;overflow:hidden}.bar i{position:absolute;inset:0 auto 0 0;transition:width .2s}.health i{background:linear-gradient(#b94f41,#7b2828)}.mana i{background:linear-gradient(#4486b6,#244a73)}.bar span{position:absolute;inset:0;text-align:center;font-size:9px;line-height:12px}.xp{height:3px;background:#333c32;margin-top:5px}.xp i{display:block;height:100%;background:#bba168}.location{position:absolute;top:22px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}.location b{display:block;font:19px var(--serif);text-shadow:0 2px 6px #000}.location span{font-size:10px;color:#b8ceac;background:#15211abf;padding:4px 10px;border-radius:12px;display:block;margin-top:8px}.top-actions{position:absolute;right:18px;top:20px;display:flex;gap:8px}.top-actions button{font-size:26px;width:48px;height:48px;padding:0;background:#18201fee;border-color:#947d51;box-shadow:0 4px 8px #0005}#hint{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);font-size:11px;color:#d5d9b9;background:#0a181cc9;padding:8px 16px;border-radius:20px;pointer-events:none;white-space:nowrap}.bottom-location{position:absolute;bottom:10px;left:200px;right:240px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;color:#d7d5b0;text-shadow:0 1px 4px #000}.combat-actions{position:absolute;bottom:35px;right:22px;display:grid;grid-template-columns:54px 64px 86px;grid-template-rows:55px 74px;gap:8px;align-items:center}.orb{border-radius:50%;padding:0;border:2px solid #bb985e;background:radial-gradient(circle at 40% 35%,#3b4440,#101717 70%);box-shadow:0 5px 15px #0008,inset 0 0 0 4px #191e19;width:54px;height:54px;font-size:25px;position:relative;text-shadow:0 0 15px currentColor}.orb small{position:absolute;bottom:2px;right:8px;color:#ebd5a9;font-size:9px}.red{color:#ff7060;grid-column:1;grid-row:2}.blue{color:#70bfff;grid-column:1;grid-row:1}.skill{color:#ffcf6b;width:66px;height:66px;grid-column:2;grid-row:1/3;font-size:35px}.attack{width:86px;height:86px;grid-column:3;grid-row:1/3;font-size:45px;color:#dfcba1}.skill.cooling{filter:grayscale(.8);opacity:.65}#joystick{position:absolute;bottom:40px;left:22px;display:grid;grid-template:repeat(3,42px)/repeat(3,42px);border-radius:50%;background:#15201dcc;border:2px solid #857856;padding:8px;box-shadow:0 5px 15px #0005}#joystick button{background:none;border:0;padding:0;color:#c1c7b5;font-size:21px;touch-action:none}#joystick button:nth-child(1){grid-column:2}#joystick button:nth-child(2){grid-column:1;grid-row:2}#joystick span{grid-column:2;grid-row:2;border:1px solid #ab9b6e;border-radius:50%;text-align:center;line-height:40px;color:#e2d1a1;background:#6a6c58}#joystick button:nth-child(4){grid-column:3;grid-row:2}#joystick button:nth-child(5){grid-column:2;grid-row:3}#chatButton{position:absolute;bottom:205px;left:24px;background:#18201ed9;padding:9px 14px;border-color:#877650}#chatDot{display:inline-block;width:6px;height:6px;background:#ffc963;border-radius:50%}#chatPanel{position:absolute;bottom:200px;left:20px;width:350px;padding:15px;user-select:text;touch-action:auto}#messages{height:150px;overflow:auto;font-size:12px;line-height:1.7}#messages b{color:#d5bd80}#messages time{color:#889987;font-size:10px;margin-right:5px}#chatForm{display:flex;gap:6px;margin-top:10px}#chatForm input{font-size:12px;padding:9px}#chatForm button{padding:6px 12px}#chatPanel .tabs{margin:8px 0}#toast{position:absolute;top:130px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#132322ed;border:1px solid #b28e56;border-radius:5px;max-width:90%;text-align:center;display:none;pointer-events:none}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-title h2,.panel-title h3{margin:0}.panel-title button{font-size:26px;border:0;background:none;padding:0 6px}.panel-title .eyebrow{margin-bottom:8px}dialog{width:min(800px,94vw);max-height:90dvh;overflow:auto;padding:28px;color:#eee8d8;touch-action:auto}dialog::backdrop{background:#050d11a8;backdrop-filter:blur(3px)}dialog button[data-close]{font-size:30px}.inventory-layout{display:grid;grid-template-columns:220px 1fr;gap:26px;margin-top:12px}#inventoryGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}#inventoryGrid button,#equipmentGrid button{padding:4px;min-width:0;height:61px;border-color:#756345;position:relative}#inventoryGrid canvas,#equipmentGrid canvas{width:44px;height:44px;image-rendering:pixelated}#inventoryGrid small{position:absolute;right:4px;bottom:3px;color:#e3d9bc;font-size:10px}#inventoryGrid button.selected{outline:2px solid #e1bd74}#equipmentGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}#equipmentGrid button.empty{font-size:10px;color:#8e998c}#attributes{font-size:12px;line-height:2;margin-top:16px;color:#b6bfb1}#attributes b{color:#e2d2b3}#gold{float:right;color:#e6c16f;font:12px system-ui}#itemDetails{margin-top:15px;min-height:110px;border-top:1px solid #5f604c;padding-top:14px;font-size:12px;color:#bcc3b4}#itemDetails h3{margin:0 0 5px}#itemDetails button{padding:8px 12px;margin:8px 5px 0 0;font-size:12px}#minimap{width:min(100%,500px);image-rendering:pixelated;display:block;margin:20px auto;background:#071310}#mapModal{width:560px}#menuModal{width:470px}#menuModal p{font-size:13px}#menuModal>button{margin:8px 8px 0 0}.check{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:14px}.check input{width:auto;margin:0;accent-color:#c5a164}#deathModal{text-align:center;width:460px}#shopItems{display:grid;grid-template-columns:1fr 1fr;gap:8px}#shopItems button{display:flex;align-items:center;gap:12px;font-size:12px;text-align:left}#shopItems canvas{width:40px;height:40px;image-rendering:pixelated}#interactButton,#portalButton,#pickupButton{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);font-size:12px;background:#20312be8;border-color:#bf9d5e}#pickupButton{bottom:225px}#stopButton{position:absolute;bottom:190px;right:35px;width:32px;height:32px;padding:0;color:#bdc4ad}#targetHud{position:absolute;top:100px;left:50%;transform:translateX(-50%);background:#161d1be8;border:1px solid #85613b;padding:7px 18px;border-radius:4px;font-size:12px;color:#f2c388}[hidden]{display:none!important}
@media(max-width:950px){#landing{grid-template-columns:1fr 380px;gap:0 4%}.intro{padding-top:60px}.auth{padding:28px}.edition{display:none}.features{gap:12px}.village-preview{width:260px;height:160px}.character-layout{gap:30px}.location{top:105px}.location b{font-size:14px}.location span{margin-top:4px}.bottom-location{left:180px;right:250px}.bottom-location>span:nth-child(2){display:none}}
@media(max-width:680px){#landing{display:flex;flex-direction:column;padding:0 6%}nav .brand{font-size:21px}.intro{padding-top:35px}.intro h1{font-size:42px}.intro p{font-size:14px}.features{font-size:10px;margin:20px 0}.village-preview{display:none}.auth{width:100%;margin:18px 0 30px}.auth h2{font-size:28px}.auth .crest{display:none}footer span:last-child{display:none}.character-layout{grid-template-columns:1fr;margin-top:30px;gap:20px}.character-layout h1{font-size:40px}.character-layout .panel{padding:20px}.class-options b{font-size:13px}.hud{top:10px;left:10px;padding:6px;gap:7px}.portrait{width:42px;height:46px}.portrait canvas{width:40px;height:40px}.vitals{width:126px}.vitals strong{font-size:13px}.bar{height:12px;margin-top:4px}.bar span{font-size:8px;line-height:10px}.top-actions{top:11px;right:10px;gap:4px}.top-actions button{width:37px;height:39px;font-size:22px}.location{top:88px}.combat-actions{bottom:45px;right:12px;grid-template-columns:44px 52px 65px;grid-template-rows:45px 60px;gap:5px}.orb{width:43px;height:43px;font-size:22px}.skill{width:52px;height:52px;font-size:28px}.attack{width:65px;height:65px;font-size:34px}#joystick{left:12px;bottom:45px;grid-template:repeat(3,33px)/repeat(3,33px);padding:6px}#joystick span{line-height:31px}#chatButton{left:14px;bottom:182px;font-size:12px}#chatPanel{left:10px;bottom:180px;width:min(330px,calc(100vw - 20px))}#hint{bottom:16px;font-size:9px;white-space:normal;text-align:center;width:80%;padding:5px 12px}.bottom-location{bottom:3px;left:12px;right:12px;font-size:8px}#interactButton,#portalButton{bottom:230px}#pickupButton{bottom:275px}#stopButton{bottom:175px;right:20px}dialog{padding:18px}.inventory-layout{grid-template-columns:1fr;gap:12px}#equipmentGrid{grid-template-columns:repeat(4,1fr)}#equipmentGrid button{height:48px}#attributes{line-height:1.7;margin-top:10px}#inventoryGrid button{height:56px}#shopItems{grid-template-columns:1fr}#toast{top:140px;font-size:12px}.inventory-layout h3{margin:10px 0}.panel-title h2{font-size:24px}}
@media(max-height:550px) and (min-width:681px){.hud{top:10px;left:10px;transform:scale(.85);transform-origin:top left}.location{top:12px}.top-actions{top:10px}.top-actions button{height:38px;width:38px;font-size:22px}#joystick{bottom:22px;transform:scale(.8);transform-origin:bottom left}.combat-actions{bottom:20px;transform:scale(.8);transform-origin:bottom right}#chatButton{bottom:155px}#chatPanel{bottom:50px;width:310px}#hint{bottom:12px}.bottom-location{display:none}#interactButton,#portalButton{bottom:100px}#pickupButton{bottom:145px}#stopButton{bottom:145px}#targetHud{top:65px}}
.landscape{background:linear-gradient(90deg,#07141c40,#08162030 50%,#0c181d44),url(/assets/background.webp) center/cover}.landscape .moon,.landscape .castle,.landscape .ridge,.landscape .forest{display:none}.intro{padding-top:70px}.intro h1{text-shadow:0 3px 25px #000}.intro p{color:#e7e6d6;text-shadow:0 2px 8px #000}.intro .eyebrow{color:#ead19f;text-shadow:0 2px 8px #000}.features span{background:#101c22b8;padding:8px 12px;border:1px solid #b0935033;border-radius:4px}.auth{background:linear-gradient(130deg,#1b2929f5,#0d171cf5)}@media(min-width:950px){.intro{align-self:start;padding-top:65px}.intro h1{font-size:clamp(40px,4.1vw,64px)}}@media(max-width:680px){.intro{padding-top:32px}.landscape{background-position:30% center}.auth{backdrop-filter:blur(5px)}}
