:root{color-scheme:dark;--text:#e9dfc8;--muted:#b9b9a0;--gold:#e1c17f;--steel:#877c61;--dark:#171c19;--rim:#a3926a}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1c2721;color:var(--text);font:16px/1.5 Georgia,serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #7e7459;background:#252d26;border-radius:0}button:hover{filter:brightness(1.18)}button:active{filter:brightness(1.3)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #f9df9f;outline-offset:3px}kbd{font:11px/1.3 ui-monospace,Consolas,monospace;color:#efe1bb;text-shadow:1px 1px #000;background:#171b16e8;padding:1px 4px;border:1px solid #b5a17160}[hidden]{display:none!important}
main,.game-shell{position:absolute;inset:0;overflow:hidden}.game-shell{background:#78a573}#game{display:block;width:100%;height:100%;touch-action:none;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #1a332026}.topbar{position:absolute;inset:0;z-index:5;pointer-events:none}.brand{position:absolute;left:26px;bottom:21px;color:#d5c59e;text-decoration:none;font-size:13px;letter-spacing:2px;text-shadow:0 2px 3px #142517;pointer-events:none}
/* Unit frames sit over the world, with a portrait medallion and inset bars. */
.player-hud{position:absolute;top:25px;left:26px;width:299px;height:84px;display:flex;align-items:center;pointer-events:none;filter:drop-shadow(0 3px 3px #15231788)}.portrait{position:relative;z-index:2;width:81px;height:81px;flex:none;border:4px solid #8f8161;border-radius:50%;background:radial-gradient(#657562,#283d31);box-shadow:0 0 0 1px #171e16,inset 0 0 0 2px #ccbb8390,inset 0 -4px 5px #172519;overflow:visible}.portrait canvas{display:block;width:100%;height:100%;border-radius:50%}.portrait b{position:absolute;bottom:-5px;left:24px;width:25px;height:23px;line-height:19px;text-align:center;font-size:13px;color:#f2dba4;border:2px ridge #ae9664;background:#232b20;box-shadow:0 1px 2px #131b11}.player-data{width:224px;margin-left:-10px;padding:9px 11px 8px 19px;background:linear-gradient(#353d2e,#1d261e);border:2px solid #807557;box-shadow:inset 0 1px #bcb28b66,inset 0 -2px #0b130e,0 0 0 1px #172116}.name-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;line-height:1;font-size:16px;text-shadow:1px 1px #10190f}.name-line strong{font-weight:normal;color:#f1e5c0}.name-line span{font-size:12px;color:#b8bca2}.health-track{position:relative;height:19px;border:1px solid #b29263;background:#352224;box-shadow:inset 0 1px 3px #110e0b;overflow:hidden}.health-track>div{height:100%;background:linear-gradient(#ad4938,#7d2d28 70%,#953c2e);box-shadow:inset 0 1px #e7a66e50;transition:width .1s}.health-track span{position:absolute;inset:0;font:12px/17px Georgia,serif;color:#fff0d3;text-align:center;text-shadow:1px 1px #361d15}.xp-track{height:5px;margin-top:5px;border:1px solid #718274;background:#14211b;overflow:hidden}.xp-track>div{height:100%;background:linear-gradient(#77acac,#477782);transition:width .2s}
.area-label{position:absolute;top:26px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 2px 3px #20321d,1px 1px #20321d}.area-label>span{display:block;font-size:21px;font-variant:small-caps;letter-spacing:2px;color:#f0dfaa}.area-label small{display:block;font-size:12px;color:#dde0bf;margin-top:3px}.target-hud{position:absolute;top:90px;left:50%;transform:translateX(-50%);width:221px;text-align:center;color:#ead9b0;font-size:15px;text-shadow:1px 2px #1e271b;pointer-events:none}.target-track{position:relative;height:16px;margin-top:5px;border:2px solid #9c8963;background:#322221;box-shadow:inset 0 0 3px #100d0a,0 0 0 1px #202319;overflow:hidden}.target-track>div{height:100%;background:linear-gradient(#b1774b,#794634)}.target-track span{position:absolute;inset:0;font-size:11px;line-height:12px;color:#fff1cf}
/* The journal is a floating game tracker, without a dashboard card. */
.quest-hud{position:absolute;top:239px;right:26px;width:250px;padding:0 0 0 13px;border-right:1px solid #d5bc7c55;background:linear-gradient(90deg,#19361b00,#1d321cad);text-shadow:0 1px 3px #132714,1px 1px #152616}.panel-heading{display:flex;align-items:center;gap:7px;padding-bottom:5px;border-bottom:1px solid #ceb37d70;color:#eed59d;font-size:16px}.panel-heading button{margin-left:auto;margin-right:6px;width:22px;height:21px;padding:0;font:18px/17px Georgia;background:#203421bb;border-color:#a69b6c66}.quest-hud h2{font-size:17px;line-height:1.3;font-weight:normal;color:#f7d991;margin:10px 0 7px}.quest-hud p{font-size:14px;line-height:1.6;color:#ece9ce;margin:0 0 11px;max-width:223px}.quest-progress{display:flex;justify-content:space-between;gap:8px;padding-right:10px;color:#e0dec2;font-size:13px}.quest-progress>span:first-child:before{content:'◇';color:#e8ce91;margin-right:6px}.quest-line{display:none}.gold{color:var(--gold)}.teal{color:#a3dfc5}.red{color:#e8a287}
.minimap-shell{position:absolute;right:26px;top:24px;width:162px;filter:drop-shadow(0 4px 4px #1a2b1888)}.minimap-shell canvas{display:block;width:162px;height:162px;border-radius:50%;border:5px solid #96866a;box-shadow:0 0 0 2px #283024,inset 0 0 0 1px #ccbd88;background:#466344}.minimap-shell>span:not(.compass){display:flex;justify-content:center;align-items:center;gap:7px;margin:7px 0 0;padding:3px 4px;background:#1d2c20df;border:1px solid #95835f80;color:#e0ce98;font-size:11px;letter-spacing:.5px}.minimap-shell .compass{position:absolute;top:-8px;left:68px;z-index:1;width:25px;text-align:center;background:#283222;border:1px solid #ae9666;color:#eed6a0;font-size:12px}.minimap-shell kbd{font-size:10px;line-height:12px}
/* Real ability slots: artwork, bindings, numeric cooldown and hover details. */
.action-dock{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:9px 13px;background:linear-gradient(#394031,#1d261c);border:3px ridge #998862;box-shadow:0 0 0 1px #161f15,0 4px 8px #18281580,inset 0 0 8px #0c150d}.action-dock:before,.action-dock:after{content:'';position:absolute;top:12px;bottom:12px;width:5px;border:1px solid #a48c5e;background:#5d6547}.action-dock:before{left:-8px}.action-dock:after{right:-8px}.abilities{display:flex;gap:7px}.ability{position:relative;width:64px;height:64px;padding:2px;border:3px ridge #aa9567;background:radial-gradient(#42564a,#111e16);box-shadow:0 0 0 1px #171e13,inset 0 0 7px #07110c;border-radius:0}.ability:hover,.ability:focus-visible{border-color:#e0c789;box-shadow:0 0 5px #e4cc7544,inset 0 0 7px #08150b}.ability:active{box-shadow:inset 0 0 12px #e4d09080}.ability-icon{display:block;width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;pointer-events:none}.ability kbd{position:absolute;bottom:1px;right:1px;z-index:3;border:0;background:#11170d99;font-size:10px;padding:0 2px;line-height:13px}.ability>small{display:none}.cooldown{position:absolute;bottom:0;left:0;right:0;z-index:1;background:#05110ac9;pointer-events:none}.cooldown-text{position:absolute;inset:0;display:grid;place-items:center;z-index:2;font:bold 19px/1 Georgia;color:#fff2cc;text-shadow:1px 2px #000;pointer-events:none}.item-count{position:absolute;bottom:1px;left:3px;z-index:3;font-size:13px;color:#fff0c2;text-shadow:1px 1px #000}.ability-tooltip{display:none;position:absolute;bottom:81px;left:50%;transform:translateX(-50%);width:234px;padding:10px 12px;background:#172019f5;border:2px solid #a7956b;box-shadow:0 3px 8px #0008;color:#e5dfc4;text-align:left;pointer-events:none;font:13px/1.55 Georgia;z-index:9}.ability-tooltip strong{display:block;color:#f4d69a;font-weight:normal;font-size:16px;margin-bottom:4px}.ability-tooltip>span{display:block}.ability-tooltip>span:last-child{margin-top:6px;color:#b9c5a6}.ability:hover .ability-tooltip,.ability:focus-visible .ability-tooltip{display:block}.currency{min-width:46px;font-size:16px;text-align:center;text-shadow:1px 1px #121e10}.currency span{color:#ebce8a;margin-right:3px}.currency small{display:block;font-size:11px;color:#b7b99d}.interact-touch{display:none}
nav{position:absolute;right:26px;bottom:24px;display:flex;gap:5px;pointer-events:auto}nav button{position:relative;width:48px;height:45px;padding:5px;background:linear-gradient(#414a36,#233023);border:2px ridge #a19066;box-shadow:0 2px 4px #14200f66}nav .menu-icon{display:block;width:29px;height:29px;background-size:contain;background-position:center;background-repeat:no-repeat;margin:auto}nav .menu-label{display:none}nav kbd{position:absolute;bottom:0;right:1px;font-size:9px;line-height:11px;padding:0 2px;border:0;background:#1b2718c9}
.interaction{position:absolute;bottom:155px;left:50%;transform:translateX(-50%);padding:7px 14px;background:#1b2b1ee8;border:2px ridge #b29c6b;box-shadow:0 3px 6px #20341c66;color:#e6ddb8;white-space:nowrap;font-size:15px}.interaction kbd{margin-right:9px;font-size:13px}.message{position:absolute;bottom:117px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(650px,68%);padding:6px 12px;background:linear-gradient(90deg,#18331900,#183319d9 15%,#183319d9 85%,#18331900);text-align:center;color:#f1e4bf;font-size:14px;text-shadow:1px 1px #102110;pointer-events:none;transition:opacity .4s}.message.faded{opacity:0}.hint{position:absolute;bottom:98px;left:26px;width:222px;padding:13px 16px;border-left:2px solid #b69b62;background:linear-gradient(90deg,#19311be6,#19311b80);text-shadow:1px 1px #163018}.hint button{position:absolute;top:1px;right:4px;border:0;background:none;color:#d0c8a3;font-size:22px;padding:0 3px}.hint-eyebrow{font-size:10px;letter-spacing:.8px;color:#cfc79b}.hint h1{font-size:21px;font-weight:normal;margin:9px 0 8px;line-height:1.2;color:#f0d79b}.hint p{font-size:14px;line-height:1.7;margin:0;color:#e1e4c7}.hint kbd{margin-right:4px}footer{position:absolute;bottom:8px;right:26px;color:#c6c7ae;font-size:10px;text-shadow:1px 1px #1d3017;pointer-events:none}footer>span:first-child{display:none}.joystick{display:none}
/* Character sheets and conversations use the same frame language as the HUD. */
dialog{position:fixed;max-height:calc(100dvh - 36px);overflow:auto;width:min(650px,calc(100% - 28px));margin:auto;padding:23px;color:var(--text);background:linear-gradient(125deg,#343d2c,#1e2c21 65%,#293323);border:4px ridge #ae986c;box-shadow:0 0 0 2px #152013,0 15px 70px #0c1a0ba0;border-radius:0}dialog::backdrop{background:#0c1d12bb}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:13px;margin-bottom:20px;border-bottom:1px solid #9c8b5d80}.eyebrow{font-size:11px;letter-spacing:1px;color:#c0b28d}.dialog-header h2{font-weight:normal;font-size:27px;line-height:1.2;margin:6px 0 0;color:#f0d9a5;text-shadow:1px 2px #152512}.close-dialog{width:27px;height:27px;padding:0;border:2px ridge #a08e64;background:#2b3727;font-size:23px;line-height:20px}.dialog-note{font-size:14px;line-height:1.65;color:#b9c4a6;margin-top:20px}.character-sheet{display:grid;grid-template-columns:155px 1fr;gap:22px}.paper-doll{padding:12px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#6b785080,#13271733);border:1px solid #88916455}.paper-doll canvas{width:128px;height:160px}.paper-doll strong{font-size:18px;font-weight:normal;color:#e6cd93;margin-top:7px}.paper-doll span{font-size:13px;color:#b7c0a0}.inventory-grid{display:grid;gap:10px}.inventory-item{display:grid;grid-template-columns:46px 1fr;gap:11px;align-items:center;padding:8px 0;border-bottom:1px solid #b3b18c33}.equipment-icon{width:44px;height:44px;border:3px ridge #a79462;background-color:#1d3022;background-size:contain;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 5px #0b1b0b}.inventory-item small{display:block;font-size:10px;letter-spacing:.6px;color:#adb89b}.inventory-item strong{display:block;font-weight:normal;font-size:16px;color:#efce8f;margin-top:2px}.inventory-item span{display:block;font-size:13px;color:#c2cbaf;margin-top:4px}.stats-row{margin-top:18px;padding:11px;background:#17261bcc;border:1px solid #89906855;font-size:14px;color:#d4d9ba}.primary,.secondary,.danger{padding:8px 24px;margin-top:12px;border:2px ridge #a38d60;font-size:16px}.primary{background:linear-gradient(#8b794e,#5b5935);color:#fff0c9}.secondary{background:linear-gradient(#394a32,#273925)}.danger{background:linear-gradient(#85513b,#613b2d)}#pauseDialog>.primary,#pauseDialog>.secondary,#restartConfirm>button{display:block;width:75%;margin:12px auto 0}#worldMap{display:block;width:100%;height:auto;border:2px solid #988762}.map-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;margin-top:14px}#mapDialog{width:min(820px,calc(100% - 28px))}.npc-conversation{display:flex;align-items:center;gap:22px}.npc-conversation canvas{width:108px;height:144px;flex:none;background:radial-gradient(#61764c70,#16271a00);border:1px solid #91936640}.npc-conversation p{font-size:17px;line-height:1.75;color:#e6dfbe}#dialogueDialog{top:auto;bottom:22px;left:0;right:0;margin:0 auto;width:min(700px,calc(100% - 28px))}#dialogueDialog>.primary{float:right;min-width:115px}
@media(max-width:1100px){.quest-hud{width:218px}.player-hud{width:265px}.player-data{width:197px}.portrait{width:73px;height:73px}.portrait b{left:21px}.area-label>span{font-size:18px}.hint{width:205px}.ability{width:58px;height:58px}.action-dock{gap:10px}.brand{font-size:11px;letter-spacing:1px}.minimap-shell{width:146px}.minimap-shell canvas{width:146px;height:146px}.minimap-shell .compass{left:61px}.quest-hud{top:220px}}
@media(max-width:760px){.player-hud{top:12px;left:12px;width:214px;height:62px}.portrait{width:57px;height:57px;border-width:3px}.portrait b{width:21px;height:20px;left:15px;line-height:16px;font-size:12px}.player-data{width:165px;padding:7px 8px 6px 16px}.name-line{font-size:13px;margin-bottom:5px}.name-line span{font-size:10px}.health-track{height:15px}.health-track span{font-size:10px;line-height:13px}.xp-track{height:4px;margin-top:4px}.area-label{top:86px;left:16px;transform:none;text-align:left}.area-label>span{font-size:13px;letter-spacing:1px}.area-label small{display:none}.minimap-shell{right:12px;top:15px;width:92px}.minimap-shell canvas{width:92px;height:92px;border-width:3px}.minimap-shell>span:not(.compass){font-size:8px;padding:2px;margin-top:4px;letter-spacing:0}.minimap-shell kbd{display:none}.minimap-shell .compass{left:36px;top:-6px;width:20px;font-size:10px}.quest-hud{right:12px;top:147px;width:161px;padding-left:8px}.panel-heading{font-size:13px}.quest-hud h2{font-size:14px;margin-top:8px}.quest-hud p{font-size:12px;line-height:1.55;margin-bottom:9px}.quest-progress{font-size:11px;gap:5px;padding-right:5px}.target-hud{top:118px;left:15px;transform:none;width:130px;font-size:13px}.target-track{height:13px}.target-track span{font-size:9px;line-height:9px}.action-dock{bottom:19px;padding:6px 8px;gap:7px;border-width:2px}.abilities{gap:4px}.ability{width:45px;height:47px;border-width:2px;padding:1px}.ability kbd{font-size:8px;line-height:10px}.cooldown-text{font-size:16px}.item-count{font-size:11px;left:2px}.currency{min-width:33px;font-size:13px}.currency small{font-size:9px}.interact-touch{display:block;width:29px;height:43px;border:2px ridge #a28f60;background:#304c2d;font-size:14px}.ability-tooltip{display:none!important}.joystick{position:absolute;display:block;bottom:117px;left:22px;width:96px;height:96px;border:3px ridge #abb38b99;border-radius:50%;background:#19371e55;touch-action:none;box-shadow:inset 0 0 15px #172b1666}.joystick span{display:block;position:absolute;left:28px;top:28px;width:34px;height:34px;border:2px ridge #c7c89aaa;border-radius:50%;background:#98ab7088;pointer-events:none}.interaction{bottom:224px;font-size:13px;padding:6px 11px}.message{bottom:107px;left:138px;right:12px;transform:none;width:auto;max-width:none;padding:4px 8px;font-size:12px;text-align:left;background:#1a341cc9}.hint{left:14px;bottom:231px;width:155px;padding:11px}.hint-eyebrow{font-size:8px}.hint h1{font-size:18px}.hint p{font-size:12px}.hint kbd{font-size:10px}.brand,footer{display:none}nav{bottom:250px;right:12px;flex-direction:column;gap:4px}nav button{width:34px;height:33px;padding:3px}nav .menu-icon{width:24px;height:24px}nav kbd{display:none}.character-sheet{grid-template-columns:90px 1fr;gap:12px}.paper-doll{padding:3px}.paper-doll canvas{width:84px;height:116px}.paper-doll strong{font-size:15px}.inventory-item{grid-template-columns:34px 1fr;gap:8px}.equipment-icon{width:32px;height:32px;border-width:2px}.inventory-item strong{font-size:14px}.inventory-item span{font-size:12px}.inventory-item small{font-size:8px}.dialog-header h2{font-size:23px}dialog{padding:16px;border-width:3px}.stats-row{font-size:12px}.npc-conversation{gap:12px}.npc-conversation canvas{width:74px;height:99px}.npc-conversation p{font-size:15px}#dialogueDialog{bottom:15px}#dialogueDialog>.primary{float:none;width:100%}}
@media(max-height:560px) and (min-width:761px){.player-hud{top:12px}.minimap-shell{top:16px;width:122px}.minimap-shell canvas{width:122px;height:122px}.minimap-shell .compass{left:50px}.quest-hud{top:177px}.quest-hud p{font-size:13px}.hint{bottom:109px;padding:10px}.hint h1{font-size:18px}.hint p{font-size:12px}.ability{width:49px;height:49px}.action-dock{bottom:18px}.message{bottom:98px}.interaction{bottom:136px}nav{bottom:18px}#dialogueDialog{bottom:12px;max-height:calc(100dvh - 24px)}}
@media(max-width:360px){.player-hud{width:191px}.player-data{width:142px}.name-line{font-size:12px}.name-line span{font-size:9px}.minimap-shell{right:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}