/* Tank Arena io (2D canvas, arcade-kit stage) */
#game-root .sim-controls-help { margin-top: 14px; }
.tai-wrap { position: relative; width: 100%; user-select: none; -webkit-user-select: none; }
.tai-wrap .ak-stage { border-radius: 14px; overflow: hidden; touch-action: none; cursor: crosshair; }
.tai-hud { position: absolute; inset: 0; pointer-events: none; font: 700 13px system-ui, sans-serif; color: #fff; }
.tai-board { position: absolute; right: 10px; top: 52px; margin: 0; padding: 6px 10px; list-style: none; min-width: 168px; background: rgba(15, 23, 42, .55); border-radius: 12px; }
.tai-board li { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.tai-board li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.tai-board .tai-board__h { justify-content: center; font-weight: 900; padding-bottom: 3px; }
.tai-board .is-me { color: #93c5fd; }
.tai-xp { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(300px, 40%); text-align: center; }
.tai-xpbar { display: block; height: 16px; border-radius: 9px; background: rgba(15, 23, 42, .55); border: 2px solid rgba(15, 23, 42, .6); overflow: hidden; }
.tai-xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fde047, #facc15); transition: width .2s; }
.tai-lvl { position: absolute; left: 0; right: 0; top: 0; line-height: 16px; font-size: 11px; color: #0f172a; text-shadow: 0 0 3px rgba(255, 255, 255, .8); }
.tai-stats { position: absolute; left: 10px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; pointer-events: auto; background: rgba(15, 23, 42, .55); padding: 6px; border-radius: 12px; }
.tai-pts { text-align: center; color: #fde047; padding-bottom: 2px; }
.tai-stats button { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; padding: 4px 8px; background: rgba(59, 130, 246, .85); color: #fff; font: 800 12px system-ui, sans-serif; cursor: pointer; text-align: left; min-width: 176px; }
.tai-stats button[disabled] { background: rgba(71, 85, 105, .7); cursor: default; }
.tai-stats kbd { font-size: 10px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .3); }
.tai-pips { margin-left: auto; display: flex; gap: 2px; }
.tai-pips i { width: 7px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.tai-pips i.on { background: #fde047; }
.tai-evo { position: absolute; left: 10px; top: 52px; display: flex; flex-direction: column; gap: 5px; pointer-events: auto; background: rgba(15, 23, 42, .65); padding: 8px; border-radius: 12px; }
.tai-evo b { color: #fde047; }
.tai-evo button { border: 2px solid #facc15; border-radius: 10px; padding: 7px 12px; background: rgba(250, 204, 21, .2); color: #fff; font: 800 14px system-ui, sans-serif; cursor: pointer; }
.tai-hud .sim-banner { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); }
.tai-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.tai-tb button { background: rgba(8, 16, 28, .7); color: #fff; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 6px 10px; font: 700 14px system-ui, sans-serif; cursor: pointer; }
.tai-tb button.is-on { background: #16a34a; }
.tai-pad { display: none; }
@media (max-width: 560px) {
  .tai-board { min-width: 128px; font-size: 11px; }
  .tai-board li span { max-width: 84px; }
  .tai-xp { width: auto; left: 10px; right: 10px; bottom: 8px; transform: none; }
  .tai-stats { bottom: 32px; padding: 5px; }
  .tai-stats button { min-width: 140px; font-size: 11px; padding: 3px 8px; }
}
@media (pointer: coarse) {
  .tai-pad { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 0 4px; margin-top: 10px; touch-action: none; }
  .tai-stick { position: relative; width: 132px; height: 132px; border-radius: 50%; background: rgba(148, 163, 184, .16); border: 2px solid rgba(148, 163, 184, .45); touch-action: none; }
  .tai-stick span { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #3b82f6; box-shadow: 0 3px 0 #1d4ed8; pointer-events: none; }
  .tai-stick--aim span { background: #f97316; box-shadow: 0 3px 0 #c2410c; }
}
.tai-wrap > .sim-result { border-radius: 14px; }
.sim-result .tai-big { font: 900 50px system-ui, sans-serif; margin: 4px 0; }
.sim-result .tai-tip { opacity: .8; font-size: 14px; }
