#touch-controls { display:none; touch-action:none; user-select:none; -webkit-user-select:none; overscroll-behavior:none; }
html body main #touch-controls[data-enabled="false"] { display:none !important; }
body.touch-enabled #touch-controls[data-enabled="true"] {
  display:flex !important;position:fixed;bottom:0;left:0;right:0;z-index:10000;
  justify-content:space-between;align-items:center;gap:12px;pointer-events:none;
  padding:10px max(18px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
}
body.touch-enabled .touch-stick {pointer-events:auto;touch-action:none;width:116px;height:116px;flex:none;position:relative;border:3px solid #5a9a86;border-radius:50%;background:#214b40;}
body.touch-enabled .touch-cross {position:absolute;inset:0;display:grid;place-items:center;font-size:90px;color:#72b39966;pointer-events:none;}
body.touch-enabled .touch-knob {position:absolute;width:54px;height:54px;left:28px;top:28px;box-sizing:border-box;background:#8fbb89;border:3px solid #d6ebbc;border-radius:50%;pointer-events:none;}
body.touch-enabled .touch-actions {pointer-events:auto;display:grid;grid-template-columns:56px 56px;gap:8px;touch-action:none;}
body.touch-enabled .touch-actions button {touch-action:none;min-height:40px;padding:6px 3px;background:#264a42;color:#eff7d7;border:2px solid #8fb68f;border-radius:16px;font:bold 11px system-ui;}
body.touch-enabled .touch-actions button[data-action="run"] {grid-column:auto;}
body.touch-enabled .touch-actions button[data-action="run"][aria-pressed="true"] {background:#b8d992;color:#133b27;border-color:#f4dc93;box-shadow:0 0 12px #a8e37966;}
body.touch-enabled .toolbar #game-menu-toggle {display:none;}
body.touch-enabled {overscroll-behavior-y:none;}

@media (pointer:coarse), (max-width:760px), (orientation:landscape) and (max-height:600px) and (max-width:1100px) {
  body { display:block; overflow-x:hidden; }
  main { padding:8px 12px calc(170px + env(safe-area-inset-bottom)); width:100%; }
  main header { gap:8px; font-size:11px; }
  #screen { width:min(100%, 720px)!important; height:auto!important; aspect-ratio:3/2; }
  #screen canvas { width:100%!important; height:100%!important; aspect-ratio:3/2; }
  main footer, #note { display:none; }
  .toolbar { flex-wrap:wrap; }
  
  html body main #touch-controls,
  html body #touch-controls,
  #touch-controls { 
    display:flex !important; 
    justify-content:space-between; 
    align-items:center; 
    gap:20px; 
    position:fixed; 
    bottom:0; 
    left:0; 
    right:0; 
    padding:10px max(18px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); 
    background:linear-gradient(0deg,#102b29 75%,#102b2900) !important; 
    z-index:2147483647 !important; 
    pointer-events:none; 
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .touch-stick,.touch-actions { pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; }
  .touch-stick { width:124px; height:124px; flex:none; border:3px solid #5a9a86; border-radius:50%; background:radial-gradient(circle,#326857,#142f2d); position:relative; box-shadow:inset 0 0 15px #071b19,0 4px 0 #061d18; }
  .touch-cross { position:absolute; inset:0; display:grid; place-items:center; font-size:100px; color:#72b39966; }
  .touch-knob { position:absolute; width:54px; height:54px; left:32px; top:32px; background:linear-gradient(#b8db99,#669679); border:3px solid #d6ebbc; border-radius:50%; box-shadow:0 4px 9px #061d18; pointer-events:none; }
  .touch-actions { display:grid; grid-template-columns:64px 64px; gap:10px; }
  .touch-actions button { min-height:43px; background:#264a42; border:2px solid #8fb68f; color:#eff7d7; border-radius:18px; text-align:center; font:bold 11px system-ui; padding:10px 5px; box-shadow:0 3px #0a211c; touch-action:none; }
  .touch-actions button[data-action=confirm] { background:#478b56; font-size:24px; }
  .touch-actions button[data-action=back] { background:#926349; font-size:22px; }
  .touch-actions button.pressed { transform:translateY(3px); box-shadow:none; filter:brightness(1.25); }
  
  #dialog { font-size:12px; max-height:85%; overflow:auto; z-index:2147483640 !important; }
  #battle { overflow:auto; font-size:12px; }
  #auth { width:100%; }
  input,select,textarea { font-size:16px; }
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:600px), (orientation:landscape) and (max-height:600px) and (max-width:1100px) {
  main { padding:4px 155px 8px; }
  main > header { display:none; }
  #screen { width:min(100%, calc((100dvh - 68px)*1.5))!important; }
  
  html body main #touch-controls,
  html body #touch-controls,
  #touch-controls { background:none !important; padding-bottom:12px !important; }
  
  .touch-stick { width:116px; height:116px; }
  .touch-knob { left:28px; top:28px; }
  .touch-actions { grid-template-columns:56px 56px; }
}

@media(max-width:600px) {
  html body main #touch-controls,
  html body #touch-controls,
  #touch-controls { z-index:2147483647 !important; }
  #overlay { bottom:calc(164px + env(safe-area-inset-bottom)); grid-template-rows:78px minmax(0,1fr) 20px; }
  .menu-identity { top:46px; }
}