:root{--gold:#f2c45b;--gold2:#ffdf83;--ink:#061315;--panel:rgba(5,20,23,.95);--line:rgba(255,223,131,.25);--text:#f5f2e8;--muted:#aab9b7;--safe-top:max(16px,env(safe-area-inset-top));--safe-bottom:max(16px,env(safe-area-inset-bottom));font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:#061315}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#061315;touch-action:none}
body.large{font-size:18px}button,select,input{font:inherit}button{color:inherit;border:1px solid var(--line);background:linear-gradient(180deg,rgba(31,61,61,.96),rgba(8,29,31,.96));border-radius:14px;min-height:48px;padding:10px 16px;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 22px rgba(0,0,0,.28)}button:active{transform:scale(.96);filter:brightness(1.18)}button.primary{color:#14201d;background:linear-gradient(135deg,#ffe18a,#bd7927);border-color:#ffe6a1;text-shadow:0 1px rgba(255,255,255,.3)}button.danger{color:#ffb4a8;border-color:#743b36}.hidden{display:none!important}
#app{position:relative;width:100%;height:100dvh;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 30%,#264f4a,#061315 70%)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 52%,rgba(0,6,7,.45));z-index:2}
.screen{position:absolute;inset:0;z-index:20;display:none;overflow:hidden}.screen.active{display:flex}.title-screen{padding:calc(var(--safe-top) + 18px) 22px calc(var(--safe-bottom) + 12px);flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,rgba(2,10,15,.26),rgba(2,10,14,.05) 36%,rgba(2,10,14,.95) 76%),url('rpg-cover.png') 49% 50%/cover no-repeat}
.title-copy{text-align:center;text-shadow:0 3px 14px #000}.eyebrow{font-size:10px;letter-spacing:.26em;color:var(--gold2);font-weight:900}.title-copy h1{margin:4px 0 0;font-family:Georgia,serif;font-size:clamp(37px,11vw,62px);line-height:.88;letter-spacing:-.045em}.title-copy h1 span{display:block;color:var(--gold)}.title-copy p{font-family:Georgia,serif;font-size:22px;margin:7px 0 5px;font-style:italic}.version-pill{display:inline-block;padding:5px 12px;border:1px solid rgba(255,224,146,.42);border-radius:99px;background:rgba(0,13,17,.55);font-size:10px;letter-spacing:.14em;color:#ffe8ad}
.menu-card{width:min(100%,420px);margin:0 auto;padding:12px;display:grid;gap:8px;background:linear-gradient(160deg,rgba(3,18,21,.88),rgba(6,25,27,.72));border:1px solid rgba(255,217,122,.28);border-radius:22px;backdrop-filter:blur(12px);box-shadow:0 22px 50px #000}.menu-card button{min-height:45px}.footer-note{text-align:center;font-size:10px;color:#b8c2be}.developer-credit{display:flex;justify-content:center;align-items:center;gap:7px;margin-bottom:5px;color:#f5df9e;letter-spacing:.07em}.developer-credit img{width:24px;height:24px;border-radius:7px;object-fit:cover}
.panel-screen{padding:var(--safe-top) 16px var(--safe-bottom);flex-direction:column;background:linear-gradient(150deg,rgba(4,18,20,.98),rgba(8,39,39,.98));overflow:auto;touch-action:pan-y}.panel-screen header{display:flex;align-items:center;gap:12px;min-height:62px;flex:0 0 auto}.panel-screen header button{width:46px;min-height:44px;padding:0;font-size:26px}.panel-screen header small{color:var(--gold);letter-spacing:.16em;font-size:9px;font-weight:900}.panel-screen h2{font-family:Georgia,serif;margin:1px 0;font-size:25px}.panel-intro{color:var(--muted);margin:4px 2px 14px;line-height:1.45;font-size:13px}.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding-bottom:12px}.hero-card{position:relative;min-height:185px;padding:12px;overflow:hidden;text-align:left;border-radius:20px;background:radial-gradient(circle at 50% 15%,var(--hero),#0a2525 58%,#051313)}.hero-card .portrait{height:79px;position:relative}.hero-card .portrait:before{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:linear-gradient(145deg,#e1a06c,#92502e);border:4px solid rgba(255,223,139,.28);box-shadow:0 0 28px var(--hero)}.hero-card .weapon{position:absolute;left:50%;top:50px;transform:translateX(-50%);font-size:33px;text-shadow:0 3px 5px #000}.hero-card h3{margin:2px 0;font:700 20px Georgia,serif}.hero-card p{font-size:10px;line-height:1.3;color:#ccd7d4;margin:3px 0}.hero-card small{color:var(--gold2);font-size:9px}.hero-card.custom{border-style:dashed}.settings-list{display:grid;gap:12px;width:min(100%,540px);margin:8px auto 22px}.settings-list label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;min-height:56px;padding:12px 14px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:15px}.settings-list select{min-width:140px;color:#fff;background:#102f31;border:1px solid #49625f;border-radius:9px;padding:8px}.settings-list input[type=range]{width:135px;accent-color:var(--gold)}.custom-preview{width:172px;height:172px;margin:0 auto;border-radius:50%;overflow:hidden;border:2px solid var(--gold);background:radial-gradient(circle,#3a776e,#061315);box-shadow:0 0 40px rgba(242,196,91,.17)}.custom-preview canvas{width:100%;height:100%}
#hud{position:absolute;inset:0;z-index:8;pointer-events:none;padding:var(--safe-top) 12px var(--safe-bottom)}.hud-top{display:flex;align-items:center;gap:8px}.hud-top button,.controls button{pointer-events:auto}.hud-top #pauseBtn{width:42px;height:42px;min-height:0;padding:0;border-radius:13px;background:rgba(4,18,20,.82)}.hero-badge{height:46px;display:flex;align-items:center;gap:6px;padding:4px 9px 4px 4px;background:rgba(3,17,18,.85);border:1px solid var(--line);border-radius:24px}.hero-badge>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#e9bf64,#6e4518);color:#10201e;font:bold 17px Georgia}.hero-badge small{display:block;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.hero-badge b{font-size:10px;color:var(--gold)}.hero-badge i{font-style:normal}.vitals{flex:1;max-width:350px;padding:6px 9px;background:rgba(3,17,18,.78);border:1px solid var(--line);border-radius:13px}.vitals>div{display:flex;align-items:center;gap:5px}.vitals span{width:37px;font-size:6px;font-weight:900}.vitals i{display:block;flex:1;height:7px;background:#1a2728;border-radius:9px;overflow:hidden}.vitals em{display:block;height:100%;width:100%;border-radius:9px;transition:width .2s}.health-meter em{background:linear-gradient(90deg,#9e2827,#f06c4c)}.spirit-meter em{background:linear-gradient(90deg,#1b75a8,#58d9e9)}.xp-meter{margin-top:3px}.xp-meter i{height:3px}.xp-meter em{background:#f2c45b}.zone-banner{margin:13px auto 0;width:max-content;max-width:75%;padding:6px 14px;border-radius:99px;background:rgba(1,13,15,.68);color:#f8dfa0;font:700 12px Georgia,serif;letter-spacing:.08em;opacity:0;transition:.3s}.zone-banner.show{opacity:1}.quest-tracker{position:absolute;top:calc(var(--safe-top) + 61px);right:12px;max-width:190px;padding:8px 10px;border-radius:10px;background:rgba(2,15,17,.7);font-size:10px;line-height:1.3;color:#dce5e2;text-align:right}.quest-tracker b{display:block;color:var(--gold);letter-spacing:.1em;font-size:8px}.interact-hint{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 167px);transform:translateX(-50%);padding:5px 10px;border-radius:99px;background:#f1cf72;color:#162323;font-size:9px;font-weight:900}
.controls{position:absolute;left:0;right:0;bottom:var(--safe-bottom);height:170px}.joystick{pointer-events:auto;position:absolute;left:22px;bottom:18px;width:116px;height:116px;border-radius:50%;border:2px solid rgba(255,231,173,.34);background:radial-gradient(circle,rgba(91,128,126,.33),rgba(3,17,18,.66));box-shadow:inset 0 0 22px rgba(0,0,0,.45);touch-action:none}.stick{position:absolute;width:54px;height:54px;left:29px;top:29px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a6bdb7,#284744 60%,#112824);border:2px solid rgba(255,238,190,.45);box-shadow:0 6px 14px #000}.action-pad{pointer-events:none;position:absolute;right:14px;bottom:5px;width:205px;height:164px}.action-pad button{pointer-events:auto;position:absolute;width:58px;height:58px;min-height:0;padding:0;border-radius:50%;font-size:20px;overflow:hidden;border:2px solid rgba(255,226,153,.45);box-shadow:0 6px 14px #000}.action-pad button small{display:block;font-size:6px;line-height:1.1;max-width:48px;margin:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-pad .attack{right:0;bottom:20px;width:74px;height:74px;font-size:27px;background:radial-gradient(circle at 36% 30%,#eac877,#8f4e20 58%,#351709)}.action-pad .skill1{right:75px;bottom:0;background:radial-gradient(circle at 35% 30%,#6dd4d0,#146270 60%,#08292f)}.action-pad .skill2{right:83px;bottom:65px;background:radial-gradient(circle at 35% 30%,#9a91dc,#3d3575 60%,#19143f)}.action-pad .prayer{right:25px;top:0;background:radial-gradient(circle at 35% 30%,#fff4b3,#d68a26 56%,#6a3709)}.action-pad .interact{left:0;bottom:25px;width:47px;height:47px;font-size:13px;background:radial-gradient(circle,#78ad7a,#254928)}.action-pad .cooldown{position:absolute;inset:0;background:rgba(0,8,12,.72);transform-origin:bottom;transform:scaleY(0);pointer-events:none}.left-handed .joystick{left:auto;right:22px}.left-handed .action-pad{right:auto;left:14px;transform:scaleX(-1)}.left-handed .action-pad button>*{transform:scaleX(-1)}
.rpg-menu{background:linear-gradient(160deg,rgba(4,18,20,.98),rgba(15,48,46,.98))}.coin-display{margin-left:auto;color:var(--gold);font-weight:900}.rpg-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px 0}.rpg-tabs button{min-height:39px;padding:6px 2px;font-size:9px}.rpg-tabs button.active{color:#18211d;background:var(--gold)}.tab-content{flex:1;min-height:0;overflow:auto;touch-action:pan-y;padding:8px 2px}.menu-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:8px}.stat-card,.quest-card,.equip-card,.world-card{padding:14px;margin-bottom:9px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.045)}.stat-card h3,.quest-card h3{font-family:Georgia,serif;margin:0 0 7px;color:#ffe2a0}.stat-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px}.quest-card p,.equip-card p,.world-card p{font-size:12px;color:#c7d3d0;line-height:1.45}.equip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.map-mini{position:relative;aspect-ratio:1.35;border-radius:15px;background:radial-gradient(circle at 25% 70%,#497d4d 0 15%,transparent 16%),radial-gradient(circle at 70% 27%,#48384f 0 18%,transparent 19%),linear-gradient(135deg,#5f8c62,#285860 50%,#57474c);border:1px solid #a68d55;overflow:hidden}.map-mini span{position:absolute;padding:3px 6px;background:#071516cc;border-radius:8px;font-size:8px}.map-mini .m1{left:10%;bottom:14%}.map-mini .m2{left:45%;top:35%}.map-mini .m3{right:7%;top:14%}
.dialogue-screen{align-items:flex-end;padding:20px 14px calc(var(--safe-bottom) + 10px);background:rgba(0,0,0,.18)}.dialogue-box{width:min(100%,620px);margin:0 auto;display:grid;grid-template-columns:64px 1fr;gap:12px;padding:15px;background:linear-gradient(150deg,rgba(5,22,24,.98),rgba(12,42,40,.98));border:1px solid #c59a4d;border-radius:18px;box-shadow:0 18px 48px #000}.dialogue-portrait{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#e2bb68,#3f2b18);color:#172420;font-size:30px}.dialogue-box small{color:var(--gold);font-weight:900;letter-spacing:.12em}.dialogue-box p{min-height:45px;margin:6px 0 12px;line-height:1.45;font-size:13px}.dialogue-box button{float:right;min-height:39px}.modal-screen{align-items:center;justify-content:center;padding:24px;background:rgba(0,5,7,.78);backdrop-filter:blur(8px)}.modal{width:min(100%,420px);padding:24px;text-align:center;border:1px solid var(--gold);border-radius:22px;background:#0b2829}.modal small{color:var(--gold);letter-spacing:.16em}.modal h2{font:700 30px Georgia;margin:7px}.modal button{display:block;width:100%;margin-top:8px}#toast{position:absolute;left:50%;top:23%;z-index:50;transform:translate(-50%,-15px);opacity:0;max-width:80%;padding:9px 14px;border-radius:99px;background:rgba(5,19,20,.93);border:1px solid var(--gold);font-size:11px;font-weight:800;text-align:center;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}#rotate{display:none;position:absolute;inset:0;z-index:100;background:#061315;color:#ffe2a0;align-items:center;justify-content:center;text-align:center;padding:30px;font:700 20px Georgia}
@media (orientation:landscape) and (max-height:560px){#rotate{display:flex}}
@media (min-width:700px){.hero-grid{grid-template-columns:repeat(3,1fr)}.panel-screen{padding-left:max(18px,calc((100% - 740px)/2));padding-right:max(18px,calc((100% - 740px)/2))}.joystick{left:max(24px,calc((100% - 900px)/2))}.action-pad{right:max(24px,calc((100% - 900px)/2))}.left-handed .joystick{right:max(24px,calc((100% - 900px)/2))}.left-handed .action-pad{left:max(24px,calc((100% - 900px)/2))}}

/* Illustrated hero portraits */
.hero-card{min-height:270px;padding:9px}
.hero-card .portrait{position:relative;width:100%;height:auto;aspect-ratio:1.22/1;overflow:hidden;border-radius:14px;border:1px solid rgba(255,225,151,.36);background:#071b22;box-shadow:0 8px 18px rgba(0,0,0,.38)}
.hero-card .portrait:before{display:none}
.hero-card .portrait img{display:block;position:absolute;width:500%;height:auto;max-width:none;left:calc(var(--col) * -100%);top:calc(var(--row) * -208.34%)}
.hero-card .weapon{left:auto;right:6px;top:auto;bottom:6px;transform:none;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:rgba(3,16,18,.86);border:1px solid var(--gold);font-size:18px;text-shadow:0 2px 4px #000}
.hero-card h3{margin:8px 2px 2px}
.hero-card p{margin:4px 2px}
.hero-card small{margin:0 2px}

/* Quest navigation and functional world map */
.quest-tracker strong{display:block;margin:2px 0;color:#fff;font:700 12px Georgia,serif}.quest-tracker i{display:inline-block;margin-top:3px;color:var(--gold2);font-style:normal;font-weight:900}
.objective-guide{position:absolute;top:calc(var(--safe-top) + 150px);right:12px;display:flex;align-items:center;gap:8px;max-width:200px;padding:7px 10px;border-radius:12px;background:rgba(2,15,17,.78);border:1px solid rgba(255,220,128,.25);font-size:9px}.objective-guide>span{display:block;color:#ffe078;font-size:20px;transform-origin:center;text-shadow:0 0 10px #ffe078}.objective-guide b{display:block;color:var(--gold);font-size:7px;letter-spacing:.12em}.objective-guide em{display:block;color:#e7efec;font-style:normal;line-height:1.25}
.quest-card.active-quest{border-color:#e0b95d;background:linear-gradient(145deg,rgba(105,77,30,.28),rgba(255,255,255,.045));box-shadow:0 0 24px rgba(225,183,85,.1)}.quest-card strong{color:#ffe09a}.quest-card small{color:#aebfbb}
.map-help{margin-top:0!important}.map-mini.detailed{aspect-ratio:1.28;isolation:isolate;background:radial-gradient(circle at 20% 75%,#719365 0 19%,transparent 20%),radial-gradient(circle at 28% 27%,#294f40 0 28%,transparent 29%),radial-gradient(circle at 58% 28%,#82755d 0 17%,transparent 18%),linear-gradient(135deg,#315946,#4f7457 45%,#493e50 100%);box-shadow:inset 0 0 35px rgba(0,0,0,.55)}.map-mini.detailed:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,220,137,.32),inset 0 0 28px rgba(0,0,0,.45)}.map-road{position:absolute;z-index:2;left:12%;top:70%;width:80%;height:8%;border-radius:99px;background:#c1a878;transform:rotate(-24deg);box-shadow:0 0 0 2px rgba(73,49,34,.35)}.map-river{position:absolute;z-index:1;left:44%;top:-10%;width:12%;height:125%;border-radius:50%;background:linear-gradient(90deg,#2c6578,#79abb0,#315f74);transform:rotate(8deg)}.map-mini .region{z-index:4;padding:3px 5px;text-align:center;line-height:1.05;background:rgba(2,17,18,.77);border:1px solid rgba(255,255,255,.14);font-size:7px;color:#e4ece8}.map-mini .forest{left:7%;top:13%}.map-mini .village{left:8%;bottom:9%}.map-mini .chapel{left:52%;top:12%}.map-mini .peace{left:43%;top:56%}.map-mini .citadel{right:4%;top:18%;color:#ffd0bd}.player-dot,.objective-dot{position:absolute!important;z-index:7!important;transform:translate(-50%,-50%);width:15px;height:15px;padding:0!important;border-radius:50%!important}.player-dot{background:#50cfff!important;border:3px solid #e8fbff;box-shadow:0 0 0 4px rgba(57,192,246,.25),0 0 15px #38bfe9}.objective-dot{background:#ffe078!important;border:3px solid #fff4bb;box-shadow:0 0 0 4px rgba(255,224,120,.25),0 0 18px #ffd55d;animation:mapPulse 1.1s infinite alternate}.map-legend{display:flex;gap:18px;justify-content:center;padding:9px 0 2px;font-size:9px;color:#cdd9d6}.map-legend span{display:flex;align-items:center;gap:5px}.map-legend i{display:inline-block;width:9px;height:9px;border-radius:50%}.map-legend .gold{background:#ffe078}.map-legend .blue{background:#50cfff}@keyframes mapPulse{to{transform:translate(-50%,-50%) scale(1.35)}}