:root{
    --parchment:#e8dcc0; --ink:#2a2018; --scarlet:#a8232a; --brass:#c9a227;
    --mud:#4a3c28; --smoke:#9a938a;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;height:100dvh;background:#14100c;overflow:hidden;
    touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  body{display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:Georgia,'Times New Roman',serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
  #wrap{position:relative;flex:0 0 auto;}
  canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;
    box-shadow:0 0 80px rgba(0,0,0,.9), inset 0 0 0 1px #000;touch-action:none;}
  /* Portrait blocker — coarse-pointer phones only */
  #rotate-hint{
    display:none;position:fixed;inset:0;z-index:100;background:#14100c;
    flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;
    color:#e9e2d0;text-align:center;padding:2rem;
  }
  #rotate-hint .icon{font-size:3.5rem;animation:tilt 2s ease-in-out infinite;}
  #rotate-hint h1{font-size:1.1rem;letter-spacing:0.12em;color:var(--brass);}
  #rotate-hint p{font-size:0.85rem;color:#9a8c6f;max-width:16rem;line-height:1.5;}
  @keyframes tilt{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
  body.mobile-portrait #rotate-hint{display:flex;}
  body.mobile-portrait #wrap,body.mobile-portrait #touch{display:none!important;}
  /* Mobile pad — bottom strip on narrow desktop; overlay in landscape */
  #touch{display:none;width:min(100vw,520px);padding:4px 8px 8px;gap:4px;flex-direction:column;
    flex:0 0 auto;z-index:5;}
  body.touch-on #touch{display:flex;}
  body.touch-on{justify-content:center;}
  #touch .trow{display:flex;gap:5px;align-items:stretch;justify-content:center;}
  #touch button{
    appearance:none;-webkit-appearance:none;border:1px solid #5a4a30;background:rgba(28,20,12,0.92);
    color:#e9e2d0;font:bold 11px "Courier New",monospace;letter-spacing:0.04em;
    border-radius:4px;min-height:40px;min-width:40px;padding:0 8px;cursor:pointer;
    touch-action:none;box-shadow:0 2px 0 #000;
  }
  #touch button:active,#touch button.held{background:rgba(168,35,42,0.85);border-color:#c9a227;color:#f5e9d0;}
  #touch .forms button{flex:1;min-width:0;font-size:10px;min-height:36px;}
  #touch .dpad{display:grid;grid-template-columns:40px 40px 40px;grid-template-rows:36px 36px 36px;gap:3px;flex:0 0 auto;}
  #touch .dpad button{min-width:40px;min-height:36px;padding:0;}
  #touch .dpad .sp{visibility:hidden;pointer-events:none;}
  #touch .primary{flex:1;min-width:72px;font-size:13px;letter-spacing:0.08em;}
  #touch .side{display:flex;flex-direction:column;gap:3px;flex:0 0 48px;}
  #touch .side button{flex:1;min-height:32px;font-size:10px;padding:0 4px;}
  #touch .util{display:flex;gap:4px;}
  #touch .util button{flex:1;min-height:34px;font-size:9px;}
  #touch .desktop-only{display:contents;}
  #touch #tAction,#touch .mob-pause,#touch .mob-charge,#touch .chg-btn{display:none;}
  @media (max-height:700px){
    #touch .dpad{grid-template-rows:32px 32px 32px;}
    #touch button,#touch .dpad button{min-height:32px;}
    #touch .forms button{min-height:32px;}
    #touch .util button{min-height:30px;}
  }
  /* Landscape mobile — fullscreen canvas + overlay controls */
  body.mobile-landscape{padding:0;margin:0;overflow:hidden;}
  html.mobile-landscape-root,html.mobile-landscape-root body{
    width:100%;height:100%;height:100dvh;padding:0!important;margin:0;overflow:hidden;
  }
  body.mobile-landscape #wrap{
    position:fixed;left:0;top:0;width:100%;height:100%;height:100dvh;
    display:block;z-index:1;padding:0;margin:0;
  }
  body.mobile-landscape canvas{
    position:absolute;left:0;top:0;display:block;
    box-shadow:none;border:none;width:100%;height:100%;
    image-rendering:pixelated;image-rendering:crisp-edges;
  }
  body.mobile-landscape #touch{
    position:fixed;inset:0;width:100%;height:100%;max-width:none;padding:0;
    pointer-events:none;z-index:10;display:block!important;gap:0;
  }
  body.mobile-landscape #touch button{
    pointer-events:auto;position:absolute;opacity:0.88;
    min-height:44px;min-width:44px;
  }
  body.mobile-landscape #touch button:active,
  body.mobile-landscape #touch button.held{opacity:1;}
  body.mobile-landscape #touch .trow.forms{
    position:absolute;top:max(6px,env(safe-area-inset-top));
    right:max(6px,env(safe-area-inset-right));left:auto;
    transform:none;width:auto;gap:5px;
  }
  body.mobile-landscape #touch .forms button{
    position:relative;flex:0 0 auto;min-width:60px;font-size:9px;min-height:36px;
  }
  body.mobile-landscape #touch .trow.main,
  body.mobile-landscape #touch .trow.util,
  body.mobile-landscape #touch .mob-pause{display:none!important;}
  body.mobile-landscape #touch .mob-charge{
    position:absolute;bottom:max(8px,env(safe-area-inset-bottom));
    right:max(8px,env(safe-area-inset-right));
    min-width:64px;min-height:44px;font-size:12px;letter-spacing:0.1em;
    display:none;
  }
  body.mobile-landscape #touch .mob-charge.ready{display:block;}
  body.touch-on #touch .side .chg-btn.ready{display:block;}
  /* Everything else the player reads between waves is rendered IN-CANVAS —
     the quartermaster muster and the dispatches share the same pixel room.
     The touch pad is the sole DOM chrome, for mobile reach only. */