:root{--bg:#080f13;--panel:#0f1c21;--line:#294149;--gold:#e9c779;--mint:#79e0b3;--red:#f17675;--ink:#e7eee9;--muted:#8ea8a9}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% -10%,#1b3032 0%,#081014 58%,#060b0e 100%);color:var(--ink);font-family:'Courier New',Consolas,monospace}button{font-family:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.hidden{display:none!important}#app{max-width:1290px;margin:0 auto;padding:0 26px}.masthead{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:12px}.wordmark{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:1px;font-size:22px;line-height:1}.wordmark b{color:var(--gold)}.wordmark small{display:block;font-size:9px;letter-spacing:3.3px;color:var(--muted);margin-top:7px}.crest{font-size:23px;color:var(--gold);display:flex;align-items:center;justify-content:center;width:41px;height:41px;border:1px solid #64745c;transform:rotate(45deg)}.crest::first-letter{transform:rotate(-45deg)}.version{color:var(--muted);font-size:10px;letter-spacing:1.5px;display:flex;align-items:center;gap:12px}.version strong{font-size:12px;color:var(--gold)}.signal{width:7px;height:7px;background:#76e5af;box-shadow:0 0 10px #76e5af;border-radius:50%}.head-button{border:1px solid #365258;color:#c8e5e0;background:#15272d;width:35px;height:35px;font-size:19px}#viewport{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border:3px solid #54705f;background:#071319;box-shadow:0 0 0 7px #101c1e,0 0 0 8px #324849,0 26px 80px rgba(0,0,0,.45);touch-action:none}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.scanlines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(2,9,12,.34) 4px,transparent 5px)}.screen{position:absolute;inset:0;z-index:9}.menu-screen{background:linear-gradient(90deg,rgba(5,18,23,.96) 0%,rgba(6,22,26,.89) 57%,rgba(7,21,22,.49) 100%);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:3.4% 7%}.hero-heading .kicker{font-size:clamp(8px,1.15vw,13px);color:var(--mint);letter-spacing:2px}.diamond{color:var(--gold)}.hero-heading h1{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(55px,9vw,120px);letter-spacing:6px;margin:0;line-height:.95;color:#ecf6ed;text-shadow:5px 5px 0 #233f3f,8px 8px 0 #091717}.hero-heading em{font-style:normal;color:#e9c779}.subtitle{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(21px,3vw,42px);letter-spacing:5px;margin-top:5px;color:#d9e8e6}.subtitle span{color:var(--gold)}.hero-heading p{letter-spacing:4px;color:#a4cfc2;font-size:clamp(8px,1vw,12px);margin:12px 0 22px}.select-box{width:min(670px,76%);padding:14px;border:1px solid #4e736c;background:rgba(9,25,29,.9);box-shadow:8px 8px 0 rgba(0,0,0,.35)}.section-label{color:var(--gold);font-size:12px;letter-spacing:1.2px;font-weight:bold;margin-bottom:12px}.section-label span{background:var(--gold);color:#14272b;padding:4px 7px}.section-label i{font-style:normal;font-size:9px;float:right;color:#91aaab}.factions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.faction{background:#12262a;color:#dae7dd;border:2px solid #355052;text-align:left;display:flex;gap:10px;padding:12px 10px;position:relative}.faction.active{border-color:var(--gold);background:linear-gradient(120deg,#243b37,#11282d)}.faction-icon{font-size:24px;color:var(--gold)}.faction-text{flex:1}.faction-text strong{display:block;font-size:12px;line-height:1.45}.faction-text small{display:block;font-size:9px;color:#9fb8b6;line-height:1.5;margin-top:5px}.faction-check{display:none;color:var(--gold);font-size:14px}.faction.active .faction-check{display:block}.selected-details{display:flex;justify-content:space-between;gap:10px;padding:11px 2px;color:var(--mint);font-size:10px;letter-spacing:.3px}.primary-btn,.secondary-btn{border:0;padding:12px 18px;font-weight:900;font-size:12px;letter-spacing:1px;min-height:40px}.primary-btn{background:var(--gold);color:#162525;box-shadow:4px 4px 0 #786b45}.primary-btn:hover{background:#ffde8c}.primary-btn span{padding-left:10px}.secondary-btn{color:#dde8e5;border:1px solid #5c7b7d;background:#1b3436}.select-box>.primary-btn{width:100%;font-size:14px}.menu-warning{color:#849c9b;line-height:1.4;font-size:9px;text-align:center;margin:14px 0 0}.hud{position:absolute;z-index:5;inset:0 0 auto 0;display:flex;justify-content:space-between;gap:15px;padding:14px 16px 0;pointer-events:none;text-shadow:2px 2px 1px #081316}.hud-left{min-width:210px}.hud-right{text-align:right;max-width:45%;background:rgba(8,18,20,.55);padding:9px;border-right:3px solid #c4a765}.hud-eyebrow{color:var(--mint);font-size:10px;letter-spacing:1px;font-weight:900}.hud-character{font-weight:bold;font-size:17px;line-height:1.5;color:#f0ead2}.hud-character span{font-size:10px;color:var(--gold)}.meter{width:min(270px,38vw);height:13px;border:2px solid #c9bba0;background:#2c191c;position:relative}.hp-meter{height:100%;width:100%;background:linear-gradient(90deg,#a72e38,#f26e62)}.hud-stat{font-size:10px;color:#f4e6d4;margin-top:5px}.hud-currencies{display:flex;gap:10px;margin-top:8px;color:var(--gold);font-size:10px}.hud-currencies b{color:#fff}.mission-title{font-size:15px;color:#fff;margin:5px 0}.mission-sub{font-size:10px;color:#e7c778}.hud-tip{font-size:9px;color:#b4d3cc;margin-top:8px}.status-line{position:absolute;bottom:12px;z-index:5;left:18px;right:18px;display:flex;justify-content:space-between;color:#dfeddd;letter-spacing:1px;font-weight:bold;font-size:10px;text-shadow:2px 2px #071519;pointer-events:none}.toast{position:absolute;z-index:8;bottom:18%;left:50%;transform:translateX(-50%);background:rgba(11,30,35,.94);border:1px solid #dfbf75;padding:10px 16px;color:#f9e8b3;max-width:75%;min-width:160px;text-align:center;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}.toast.show{opacity:1}.dialog-screen{background:rgba(2,10,13,.84);display:flex;align-items:center;justify-content:center;padding:22px}.dialog-box{max-width:570px;width:100%;background:#12262c;border:2px solid #d6b96d;padding:25px 28px;box-shadow:9px 9px 0 #071216;max-height:96%;overflow-y:auto}.dialog-box h2{color:#f0dfad;font-size:24px;margin:5px 0 14px}.dialog-box p{color:#c9d9d4;line-height:1.65;font-size:13px;white-space:pre-line}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.mode-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mode{background:#152f35;border:1px solid #49636b;color:#d7e9db;padding:10px 6px;font-size:11px;font-weight:bold}.mode.active{border:2px solid var(--gold);color:var(--gold)}.mode small{display:block;margin-top:6px;line-height:1.35;color:#91ada9;font-size:9px}.settings-note{font-size:10px!important}.below{display:flex;justify-content:space-between;align-items:center;padding:23px 6px;gap:20px}.info-block{max-width:600px}.info-top{color:var(--gold);font-size:12px;font-weight:bold;letter-spacing:2px}.info-top span{color:#628080}.info-top .info-accent{font-size:9px;color:var(--mint);margin-left:8px}.info-block p{color:#9eb2b2;font-size:11px;line-height:1.7}.keyboard-hint{display:flex;gap:13px;flex-wrap:wrap;font-size:9px;color:#aabdb9}.keyboard-hint span{white-space:nowrap}kbd{border:1px solid #4f7171;padding:4px 6px;color:var(--gold);background:#17272d}.footer{border-top:1px solid #254148;padding:20px 4px 30px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#6e8a8d;letter-spacing:1px}.mobile-controls{position:absolute;z-index:6;inset:auto 14px 15px;display:none;justify-content:space-between;pointer-events:none}.dpad{width:132px;height:122px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px}.dpad .arrow{border:2px solid #8ab8a9;background:rgba(9,32,36,.76);color:#f6e3ad;font-size:17px;pointer-events:auto;touch-action:none}.arrow-left{grid-column:1;grid-row:2}.arrow-right{grid-column:3;grid-row:2}.arrow-up{grid-column:2;grid-row:1}.arrow-down{grid-column:2;grid-row:3}.action-pad{display:flex;align-items:flex-end;gap:5px;pointer-events:none}.action{pointer-events:auto;touch-action:none;width:58px;height:58px;border-radius:50%;border:2px solid #a1b9b1;background:rgba(11,32,34,.88);color:#fff;font-size:18px;font-weight:900;line-height:1}.action span{display:block;font-size:8px;margin-top:4px}.action.attack{width:71px;height:71px;border-color:#ef9d6b;background:rgba(120,52,35,.82)}.action.special{border-color:#e5c16c;background:rgba(100,81,29,.82)}.action.dodge{border-color:#89d6c1}.action.interact{border-color:#aeb3e0}.action.pressed,.arrow.pressed{background:#c49d57;color:#0b1f20}@media (max-width:1050px){#app{padding:0 12px}.masthead{min-height:66px}.below{flex-direction:column;align-items:flex-start;gap:7px}.wordmark{font-size:16px}.version{font-size:8px}.keyboard-hint{display:none}}@media (pointer:coarse),(max-width:770px){.mobile-controls:not(.hidden){display:flex}.hud{padding:8px 11px}.hud-left{min-width:130px}.hud-character{font-size:12px}.hud-eyebrow{font-size:8px}.hud-right{max-width:51%;padding:5px}.mission-title{font-size:11px}.mission-sub,.hud-tip{font-size:8px}.hud-currencies{gap:6px;font-size:8px}.status-line{font-size:8px;bottom:5px}.menu-screen{padding:3% 5%}.hero-heading h1{font-size:clamp(48px,9vw,100px)}.select-box{width:85%;padding:9px}.faction{padding:7px}.faction-text strong{font-size:9px}.faction-text small{font-size:8px}.hero-heading p{margin:4px 0 8px}.selected-details{font-size:8px;padding:6px 2px}.menu-warning{font-size:7px;margin:7px 0 0}.dialog-box{padding:12px 17px}.dialog-box h2{font-size:18px}.dialog-box p{font-size:10px}.dialog-actions{margin-top:10px}.primary-btn,.secondary-btn{min-height:33px;padding:9px 11px}.mobile-controls{bottom:17px}.footer{font-size:8px}}@media(max-width:560px){.version{letter-spacing:0;gap:5px}.wordmark small{font-size:7px;letter-spacing:1.5px}.crest{display:none}.menu-screen{padding:4% 3%}.hero-heading .kicker{font-size:7px;letter-spacing:1px}.hero-heading h1{font-size:48px}.subtitle{font-size:16px;letter-spacing:2px}.hero-heading p{font-size:8px}.select-box{width:100%}.faction-icon{font-size:15px}.faction-text small{font-size:7px}.hud-right{display:none}.dpad{transform:scale(.82);transform-origin:left bottom}.action-pad{transform:scale(.8);transform-origin:right bottom}}
@media(max-height:650px) and (orientation:landscape){#app{padding:0 3px}.masthead{min-height:36px;height:36px}.wordmark{font-size:12px}.wordmark small{font-size:6px;margin-top:4px}.crest{width:22px;height:22px;font-size:12px}.version{font-size:7px;gap:6px}.version strong{font-size:8px}.head-button{width:26px;height:26px;font-size:14px}#viewport{width:min(100%,calc((100dvh - 43px)*16/9));margin:0 auto}.below,.footer{display:none}.mobile-controls{bottom:9px}.status-line{bottom:2px}}


/* v0.1.002 — touchscreen accessibility and unobstructed gameplay */
.game-stage { position:relative; }
#viewport { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#gameCanvas, .mobile-controls, .mobile-controls * {
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
.mobile-controls button {
  -webkit-appearance:none; appearance:none;
  -webkit-user-drag:none;
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
/* On a touch device: controls live in a dedicated bar, outside the game canvas. */
@media (pointer:coarse), (max-width:770px) {
  .game-stage { display:flex; flex-direction:column; gap:7px; }
  #viewport { width:100%; margin:0 auto; max-height:none; }
  .mobile-controls:not(.hidden) {
    display:flex; position:relative; inset:auto; z-index:1;
    width:100%; min-height:112px; padding:8px 14px;
    justify-content:space-between; align-items:center; gap:12px;
    pointer-events:auto; border:1px solid #42635e;
    background:linear-gradient(180deg,#18282b,#0b191d);
    border-radius:8px;
  }
  .mobile-controls .dpad {
    transform:none; flex:0 0 142px;
    width:142px; height:105px;
    gap:3px;
  }
  .mobile-controls .action-pad {
    transform:none; display:grid;
    grid-template-columns:repeat(4, minmax(49px, 62px));
    align-items:center; justify-content:end;
    gap:6px; flex:0 1 auto;
  }
  .mobile-controls .arrow { border-radius:7px; min-width:0; min-height:0; }
  .mobile-controls .action, .mobile-controls .action.attack {
    width:58px; height:58px; font-size:16px;
    border-radius:50%; box-shadow:0 4px 0 rgba(0,0,0,.4);
  }
  .mobile-controls .action span { font-size:8px; }
  .status-line { bottom:7px; font-size:8px; }
  .toast { bottom:10%; }
}
/* Landscape phones: D-pad | canvas | skills. Neither control occupies the game. */
@media (pointer:coarse) and (orientation:landscape) and (min-width:700px) {
  .game-stage {
    display:grid;
    grid-template-columns:minmax(102px,14%) minmax(0,1fr) minmax(164px,23%);
    grid-template-rows:auto; align-items:center; gap:6px;
  }
  #viewport {
    grid-column:2; grid-row:1;
    justify-self:center; width:100%;
    max-width:100%; max-height:calc(100dvh - 50px);
    aspect-ratio:16 / 9;
  }
  .mobile-controls:not(.hidden) { display:contents; }
  .mobile-controls .dpad {
    grid-column:1; grid-row:1;
    width:min(100%,134px); height:122px;
    flex:none; align-self:end; justify-self:center;
    margin:0 0 13px;
  }
  .mobile-controls .action-pad {
    grid-column:3; grid-row:1;
    display:grid; grid-template-columns:repeat(2, minmax(60px,72px));
    gap:8px 10px; flex:none;
    align-self:end; justify-self:center;
    margin:0 0 13px;
  }
  .mobile-controls .action, .mobile-controls .action.attack {width:66px;height:66px}
  .hud-right {display:none;}
  .hud-currencies {font-size:9px;}
}
/* Compact screens: controls below full-width canvas, no overlays. */
@media (max-width:699px) {
  .mobile-controls:not(.hidden) { padding:7px 9px; min-height:116px; }
  .mobile-controls .dpad {flex:0 0 130px;width:130px;height:110px}
  .mobile-controls .action-pad {grid-template-columns:repeat(2,58px);gap:5px 8px}
  .mobile-controls .action,.mobile-controls .action.attack{width:55px;height:55px;font-size:15px}
  .mobile-controls .action span {font-size:7px}
  .hud-right {display:none;}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:650px) {
  #app {padding:0 5px;}
  .masthead{height:34px;min-height:34px}
  .game-stage {max-height:calc(100dvh - 38px);}
  .mobile-controls .action,.mobile-controls .action.attack{box-shadow:0 2px 0 rgba(0,0,0,.4)}
}