/* Transparent corner controls keep the entire 16:9 game view available. */
#cv{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#touch-controls[hidden],#touch-gamepad[hidden],#touch-menu-actions[hidden],#touch-controls-toggle[hidden]{display:none!important}
#touch-controls{position:fixed;z-index:5;inset:0;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-controls-on #wrap{inset:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box}
.touch-controls-on #fg-dock{display:none}
#touch-gamepad{position:absolute;inset:0;pointer-events:none}
.touch-key,.touch-menu-button,#touch-controls-toggle,#touch-joystick{box-sizing:border-box;min-width:44px;min-height:44px;border:1px solid #d1dbea55;color:#f2f2ec;font:500 11px "PingFang SC","Microsoft YaHei",sans-serif;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
#touch-joystick{position:absolute;width:116px;height:116px;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));border-radius:50%;padding:0;background:radial-gradient(circle,#c3d3e40b 40%,#849fba15 41%,#d0ddef0d 70%);box-shadow:inset 0 0 0 8px #0b172319,0 2px 10px #0002}
.touch-joystick-ring{position:absolute;inset:12px;border:1px solid #d0ddef2b;border-radius:50%;pointer-events:none}
#touch-joystick:before,#touch-joystick:after{content:"";position:absolute;pointer-events:none;background:#c3d3e426}
#touch-joystick:before{height:1px;width:92px;left:11px;top:57px}#touch-joystick:after{width:1px;height:92px;left:57px;top:11px}
#touch-joystick-thumb{position:absolute;left:33px;top:33px;width:48px;height:48px;border-radius:50%;border:1px solid #e2ebf178;box-sizing:border-box;background:radial-gradient(circle at 35% 25%,#a4b9c764,#43566b79);box-shadow:0 2px 8px #0005;pointer-events:none;will-change:transform}
#touch-joystick.is-held{border-color:#e7e4cda3;background-color:#607f9f1c}
.touch-actions{position:absolute;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:168px;height:164px;pointer-events:none}
.touch-key{position:absolute;border-radius:50%;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#18263553;box-shadow:0 2px 8px #0002;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.touch-key svg{display:block;width:27px;height:27px;pointer-events:none;flex:none}.touch-key-label{pointer-events:none;line-height:1.2;font-size:10px;white-space:nowrap;color:inherit;opacity:.78}
.touch-key-fire{width:80px;height:80px;right:0;bottom:10px;background:#8d624043;border-color:#e5c99b7d;color:#ffeac5}.touch-key-fire svg{width:40px;height:40px}.touch-key-fire .touch-key-label{font-size:11px}
.touch-key-jump{width:58px;height:58px;left:18px;bottom:0;color:#d8eef3;background:#29475643}
.touch-key-dash{width:54px;height:54px;left:0;top:27px;color:#e0e8f8}
.touch-key-switch{width:48px;height:48px;right:11px;top:0;color:#e8dfc4}
.touch-system{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
.touch-system .touch-key{position:relative;width:44px;height:44px;padding:8px;background:#14233168}.touch-system .touch-key svg{width:25px;height:25px}.touch-system .touch-key-label{display:none}
.touch-no-pillar .touch-system{top:calc(84px + env(safe-area-inset-top,0px))}
.touch-key.is-held,.touch-key:active{border-color:#f4dba5d4;background:#8c795469;box-shadow:inset 0 2px 5px #0003;color:#fff0c8}
.touch-key:focus-visible,.touch-menu-button:focus-visible,#touch-controls-toggle:focus-visible,#touch-joystick:focus-visible{outline:2px solid #e9ca86;outline-offset:3px}
#touch-controls-note{position:absolute;bottom:calc(8px + env(safe-area-inset-bottom,0px));left:156px;right:198px;margin:0;text-align:center;font-size:10px;line-height:14px;color:#b7c4d28a;pointer-events:none}
#touch-controls-toggle{position:fixed;z-index:6;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:24px;background:#17202bbd;box-shadow:0 2px 8px #0003}
#touch-controls-toggle svg{width:23px;height:23px;flex:none}.touch-controls-on #touch-controls-toggle{position:static;flex:none;padding:8px 12px;background:#1e2c3bd9}
#touch-menu-actions{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;pointer-events:none}
.touch-menu-button{display:flex;align-items:center;justify-content:center;gap:7px;flex:0 1 auto;max-width:220px;padding:10px 15px;border-radius:26px;background:#1a2938c9;box-shadow:0 2px 12px #0003}.touch-menu-button svg{width:22px;height:22px;flex:none}.touch-menu-button .touch-key-label{font-size:12px;opacity:1;white-space:normal}.touch-menu-button:disabled{opacity:.5;cursor:wait}
#touch-controls:not([data-state=play]) #touch-controls-note{display:none}
#touch-landscape-hint{display:none}
@media(orientation:portrait){
  .touch-controls-on #wrap{align-items:flex-start;padding-top:max(calc(54px + env(safe-area-inset-top,0px)),14vh)}
  #touch-joystick{left:max(20px,env(safe-area-inset-left,0px));bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .touch-actions{right:max(14px,env(safe-area-inset-right,0px));bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .touch-system,.touch-no-pillar .touch-system{top:calc(12px + env(safe-area-inset-top,0px));flex-direction:row}
  #touch-controls-note{left:12px;right:12px;bottom:calc(35px + env(safe-area-inset-bottom,0px));font-size:10px}
  #touch-landscape-hint{display:block;position:absolute;bottom:calc(13px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;margin:0;font-size:11px;color:#8d9eaf;pointer-events:none}
  #touch-menu-actions{bottom:calc(68px + env(safe-area-inset-bottom,0px));gap:8px}
  .touch-menu-button{padding:10px 13px;max-width:calc(50% - 8px)}
}
@media(max-width:360px){#touch-joystick{left:12px}.touch-actions{right:8px;width:156px}.touch-key-jump{left:13px}.touch-key-dash{left:0}.touch-menu-button{padding:9px 11px}}
/* Keep the existing dialog readable and scrollable on a phone. */
.touch-controls-on #field-guide{z-index:8;max-height:calc(100dvh - 16px);width:calc(100vw - 16px);height:calc(100dvh - 16px);padding:12px;overflow-y:auto;touch-action:auto}
.touch-controls-on #field-guide button,.touch-controls-on #field-guide select,.touch-controls-on #field-guide input{min-height:44px;box-sizing:border-box}
.touch-controls-on .fg-header{flex-wrap:wrap}
.touch-controls-on .fg-header [role=tablist]{flex-wrap:wrap;margin-left:0}
.touch-controls-on .fg-map-top>div{flex-wrap:wrap}
.touch-controls-on #fg-map{height:auto;overflow:visible}
@media(max-width:650px){
  .touch-controls-on .fg-library,.touch-controls-on .fg-boss-library{display:flex;flex-direction:column;height:auto;min-height:0}
  .touch-controls-on .fg-index{min-height:360px}
  .touch-controls-on #fg-cards{grid-template-columns:repeat(3,minmax(0,1fr));min-height:220px;max-height:300px}
  .touch-controls-on .fg-detail,.touch-controls-on .fg-boss-detail{border-left:0;border-top:1px solid #455149;padding:12px 0 0;overflow:visible}
  .touch-controls-on #fg-boss-cards{grid-template-columns:repeat(2,minmax(0,1fr));min-height:220px;max-height:410px}
  .touch-controls-on #fg-room-list{grid-template-columns:1fr}
  .touch-controls-on #fg-area-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}