/* Tank Duel: a self-contained, readable arcade cabinet in either app theme. */
#tank-overlay { --text: #eaf0ff; --muted: #a9b8cc; --line: #ffffff24; background: #080d16f2; color: var(--text); }
#tank-overlay .tank-room { width: min(1180px, 98vw); height: min(94dvh, 970px); max-height: 98dvh; padding: 14px; gap: 10px; background: linear-gradient(135deg, #253247, #101926); border: 1px solid #7386a15c; border-radius: 20px; box-shadow: 0 32px 100px #0009, inset 0 1px #ffffff1c; }
#tank-overlay .tank-hud { min-height: 62px; padding: 7px 12px; border: 1px solid #ffffff18; border-radius: 11px; background: #09121e; }
#tank-overlay .tank-p { gap: 14px; padding: 0 8px; }
#tank-overlay .tp-score { min-width: 44px; color: #ffde99; font-size: 30px; font-family: ui-monospace, monospace; text-align: center; }
#tank-overlay .tp-name { font-size: 13px; letter-spacing: .12em; }
#tank-overlay .tank-mid { gap: 6px; }
#tank-overlay #tank-round { font-size: 11px; letter-spacing: .13em; }
#tank-overlay .tank-wind { font-size: 12px; font-variant-numeric: tabular-nums; color: #b4d8ca; }
#tank-overlay .tank-stage { background: #071322; min-height: 140px; border-color: #3e5269; border-radius: 9px; }
#tank-overlay #tank-canvas { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#tank-overlay .tank-title { background: linear-gradient(180deg, #0c15264d, #0c1526df); backdrop-filter: none; gap: 15px; }
#tank-overlay .tank-logo { font-size: clamp(32px, 5vw, 65px); color: #a9c9ef; text-shadow: 0 2px #25456c, 0 5px 18px #0007; letter-spacing: .07em; }
#tank-overlay .tank-logo span { display: inline; margin-left: .15em; color: #ffd08b; }
#tank-overlay .tank-sub { max-width: 510px; font-size: 14px; }
.tank-start-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }
.tank-title-tip { margin: 0; color: #b2bfd1; font-size: 11px; line-height: 1.8; }
#tank-overlay .tank-dock { padding: 12px 16px; border: 1px solid #ffffff24; background: linear-gradient(#2b3b50, #1a283a); box-shadow: inset 0 1px #ffffff12; }
.tank-armory-head { display: flex; justify-content: space-between; gap: 12px; color: #bfd0e8; font-size: 10px; letter-spacing: .08em; }
#tank-last-shot { text-align: right; color: #adc0d4; letter-spacing: 0; }
#tank-overlay .td-wname { max-width: none; color: #ffe0a3; min-height: 40px; background: #0d1b2b; border: 1px solid #58718d; border-radius: 8px; }
#tank-overlay .td-arrow { width: 40px; height: 40px; }
.tank-weapon-detail { margin: 0; min-height: 17px; color: #b8c8d9; font-size: 11px; line-height: 1.5; text-align: center; }
#tank-overlay .td-ctl { padding: 7px 12px; gap: 5px; border: 1px solid #ffffff0d; }
#tank-overlay .td-val { background: #071320; color: #cce5f5; font-family: ui-monospace, monospace; min-width: 65px; font-size: 17px; line-height: 1.3; }
.tank-fine { display: flex; justify-content: center; align-items: center; gap: 8px; }
.tank-fine button { width: 32px; min-height: 30px; background: #32465c; border: 1px solid #5d748c; border-radius: 6px; color: #eaf0ff; font-size: 18px; cursor: pointer; }
.tank-fine button:disabled { opacity: .35; }
#tank-overlay .td-move { justify-content: center; padding: 8px; }
#tank-overlay .td-mbtn { min-width: 32px; min-height: 32px; }
#tank-overlay .tank-fire { min-width: 92px; background: linear-gradient(#ffdc82, #eea647); box-shadow: 0 3px #84501e; color: #352614; border: 1px solid #ffe1a4; border-radius: 9px; }
.tank-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tank-tools .td-turn { flex: 1; text-align: right; font-size: 11px; }
#tank-overlay .ghost-btn { color: #c8d8ec; background: #122236; border-color: #59708a; }
#tank-overlay .tank-panel { background: #172438; padding: 12px; border-radius: 10px; }
#tank-overlay .tank-pool { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 240px; gap: 8px; }
#tank-overlay .tank-wpn { background: #24364d; border: 1px solid #48607b; padding: 10px; border-radius: 8px; }
#tank-overlay .tank-wpn:hover:not(:disabled) { background: #314965; border-color: #f6c56c; }
#tank-overlay .tank-wpn .wn { line-height: 1.4; }
.tank-wpn small, .twl-item small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.5; font-weight: 400; color: #b8c8db; white-space: normal; }
#tank-overlay .tank-wpn .wtag { font-size: 9px; align-self: start; color: #dbbe87; }
#tank-overlay .tank-wlist { background: #142238; border-color: #68849d; border-radius: 12px; max-height: min(65dvh, 520px); }
#tank-overlay .twl-item { align-items: start; background: #263950; border-color: #445e7a; }
#tank-overlay .twl-item.active { border-color: #f3c875; background: #3b4551; }
#tank-overlay .twl-item .twl-n { white-space: normal; overflow: visible; }
#tank-overlay .tank-dock input[type=range] { accent-color: #eabd6b; }
@media (max-width: 760px) {
  #tank-overlay .tank-room { padding: 7px; gap: 6px; border-radius: 10px; }
  #tank-overlay .tank-pool { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tank-armory-head { font-size: 9px; }
  #tank-overlay .tank-dock { padding: 8px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  #tank-overlay .tank-room { display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: 38px minmax(0, 1fr); width: 100%; height: 100dvh; max-height: 100dvh; padding: 4px 8px; border-radius: 0; gap: 5px; }
  #tank-overlay .tank-hud { grid-column: 1 / -1; }
  #tank-overlay .tank-stage { grid-column: 1; grid-row: 2; }
  #tank-overlay[data-phase="title"] .tank-stage, #tank-overlay[data-phase="idle"] .tank-stage { grid-column: 1 / -1; }
  #tank-overlay .tank-dock, #tank-overlay .tank-panel { grid-column: 2; grid-row: 2; min-width: 0; overflow-y: auto; }
  #tank-overlay .tank-dock { justify-content: space-between; }
  .tank-armory-head { flex-direction: column; gap: 1px; }
  #tank-last-shot { text-align: left; }
  #tank-overlay .td-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  #tank-overlay .td-main > * { min-width: 0; }
  #tank-overlay .td-ctl:nth-child(2) { grid-column: 1; grid-row: 1; }
  #tank-overlay .td-ctl:nth-child(3) { grid-column: 2; grid-row: 1; }
  #tank-overlay .td-main > .tank-fire { grid-column: 1 / -1; min-height: 38px; }
  #tank-overlay .tank-dock .td-arrow { min-width: 25px; width: 25px; }
  #tank-overlay .tank-dock .td-wname { font-size: 11px; }
  #tank-overlay .td-weaprow { gap: 3px; }
  #tank-overlay .tank-tools { gap: 4px; }
  #tank-overlay .tank-tools .td-turn { flex-basis: 100%; text-align: left; font-size: 9px; }
  #tank-overlay .tank-hud { min-height: 36px; padding: 1px 10px; }
  #tank-overlay .tp-score { font-size: 21px; }
  #tank-overlay .tank-stage { min-height: 95px; }
  #tank-overlay .tank-title { gap: 8px; padding: 8px; }
  #tank-overlay .tank-logo { font-size: 30px; }
  .tank-title-tip { display: none; }
  #tank-overlay .tank-sub { font-size: 11px; }
  #tank-overlay .tank-dock { padding: 5px 10px; gap: 4px; }
  #tank-overlay .td-ctl { padding: 2px 8px; gap: 0; }
  #tank-overlay .td-arrow, #tank-overlay .td-wname { min-height: 28px; height: 28px; }
  #tank-overlay .td-val { font-size: 13px; min-width: 36px; padding: 2px 3px; }
  .tank-fine { gap: 3px; }
  .tank-fine button { width: 23px; min-height: 23px; height: 23px; font-size: 15px; padding: 0; }
  #tank-overlay .tank-pool { max-height: none; grid-template-columns: 1fr; }
  #tank-overlay .tank-wpn small, .tank-weapon-detail { display: none; }
  #tank-overlay .tank-tools .ghost-btn { padding: 3px 9px; min-height: 27px; }
}