.dapp { height: 100dvh; display: grid; grid-template-columns: 344px minmax(0, 1fr); }
.garage { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg-2); border-right: 1px solid var(--edge); }
.g-head { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px 18px; border-bottom: 1px solid var(--edge); background: linear-gradient(180deg, #121a23, var(--bg-2)); }
.g-head h1 { margin: 0; font: 700 26px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.back { color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.back:hover { color: var(--fire); }
.garage-content { min-height: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--edge-2) transparent; }
.g-sec { padding: 20px 22px; border-bottom: 1px solid var(--edge); display: grid; gap: 13px; }
.g-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.g-sec h2::before { content: ''; width: 4px; height: 14px; background: var(--fire); transform: skewX(-18deg); }
.g-row { display: flex; justify-content: space-between; align-items: center; }
.g-actions { display: flex; gap: 4px; }
.g-actions button { padding: 5px 9px; border: 1px solid var(--edge-2); background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.g-actions button:hover { border-color: var(--fire); color: var(--text); }
.search.small { height: 36px; }
.robots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; grid-auto-rows: max-content; max-height: 232px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--edge-2) transparent; }
.robots li { --cut: 7px; --edge-c: var(--edge); --fill: radial-gradient(ellipse 90% 70% at 50% 55%, #1f2c3a, #111820 75%); cursor: pointer; }
.robots li:hover { --edge-c: #5d7186; }
.robots li[aria-current=true] { --edge-c: var(--fire); --fill: radial-gradient(ellipse 90% 70% at 50% 55%, #4a321d, #18130e 75%); }
.robots img { display: block; width: 100%; aspect-ratio: 1.1; object-fit: cover; }
.robots span { display: block; padding: 3px 4px 6px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.robots li[aria-current=true] span { color: var(--fire-hi); }
.rinfo { margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot { --cut: 9px; --edge-c: var(--edge); --fill: var(--panel); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 11px; }
.slot .wthumb { width: 40px; height: 44px; object-fit: contain; background: #0a1016; }
.slot .wthumb.empty { display: grid; place-items: center; color: var(--dim); font-size: 18px; }
.slot .meta { min-width: 0; display: grid; gap: 6px; }
.slot .badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cls { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.cls.light { color: var(--light); }
.cls.medium { color: var(--medium); }
.cls.heavy { color: var(--heavy); }
.cls.ability { color: var(--cyan); }
.pos { font-size: 10px; color: var(--dim); }
.slot select { width: 100%; min-width: 0; height: 32px; padding: 0 8px; font-size: 12px; }
.slot.fixed { --fill: transparent; }
.slot.fixed select { display: none; }
.slot.fixed .fixed-note { font-size: 11px; color: var(--muted); }
.note { margin: 0; font-size: 11px; color: var(--dim); line-height: 1.6; }

/* Arena HUD */
.arena { position: relative; min-height: 0; overflow: hidden; background: #0d141b; }
#dview { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.robots li, .slot, .speedo, .controls-guide summary, .legend, .wslot, .sound, .focus-hint, .tbar, .dpad button, .firepad button {
  --cut: 8px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--edge-c, var(--edge-2)) 0 calc(50% + 1px), transparent 0) 0 0 / var(--cut) var(--cut) no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--edge-c, var(--edge-2)) 0 calc(50% + 1px), transparent 0) 100% 100% / var(--cut) var(--cut) no-repeat,
    var(--fill, var(--hud));
  box-shadow: inset 0 0 0 1px var(--edge-c, var(--edge-2));
  border: 0;
}
.d-title { position: absolute; top: 22px; left: 26px; pointer-events: none; }
.d-title h2 { margin: 2px 0 0; font: 700 clamp(28px, 3.2vw, 44px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 16px #000b, 0 0 2px #0008; }
.d-title .tag { text-shadow: 0 1px 6px #000; }
.speedo { --edge-c: #ffffff26; position: absolute; right: 22px; top: 22px; min-width: 104px; padding: 10px 14px 9px; text-align: right; pointer-events: none; }
.speedo div:first-child { font: 700 30px/1 var(--display); }
.speedo small { font: 700 10px var(--ui); color: var(--muted); margin-left: 5px; letter-spacing: .06em; }
.speedo .state { font-size: 10px; font-weight: 700; color: var(--fire); letter-spacing: .14em; text-transform: uppercase; margin-top: 5px; }
.controls-guide { position: absolute; left: 22px; bottom: 22px; z-index: 7; }
.controls-guide summary { --edge-c: #ffffff26; display: flex; align-items: center; gap: 14px; list-style: none; padding: 9px 13px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; color: #d8e0e6; }
.controls-guide summary::-webkit-details-marker { display: none; }
.controls-guide summary::after { content: '+'; color: var(--fire); font-size: 14px; }
.controls-guide[open] summary::after { content: '−'; }
.legend { --cut: 12px; --fill: #0b1118f2; display: flex; flex-direction: column; gap: 8px; width: 270px; max-width: min(320px, calc(100vw - 48px)); padding: 16px; color: #c3ced7; font-size: 12px; position: absolute; left: 0; bottom: 46px; }
.legend kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 5px; margin-right: 3px; font: 700 10px var(--ui); color: #fff; border: 1px solid #ffffff40; border-bottom-width: 2px; background: #1a2430; }
.legend .mouse { color: var(--text); font-weight: 700; }
.legend .off { opacity: .35; }
.focus-hint { --fill: #0b1118e6; --edge-c: var(--fire); position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text); padding: 9px 16px; pointer-events: none; }
.crosshair { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.crosshair span { --c: #f4f8fbe6; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border: 1.5px solid var(--c); border-radius: 50%; box-shadow: 0 0 0 1px #0006, inset 0 0 0 1px #0004; }
.crosshair span::before, .crosshair span::after { content: ''; position: absolute; background: var(--c); }
.crosshair span::before { left: 50%; top: -7px; width: 1.5px; height: 5px; margin-left: -.75px; box-shadow: 0 31px 0 var(--c); }
.crosshair span::after { top: 50%; left: -7px; height: 1.5px; width: 5px; margin-top: -.75px; box-shadow: 31px 0 0 var(--c); }
.wbar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; max-width: calc(100% - 190px); flex-wrap: wrap; justify-content: center; }
.wslot { --edge-c: #ffffff24; display: flex; align-items: center; gap: 10px; width: 140px; min-width: 0; padding: 9px 11px 9px 9px; cursor: pointer; pointer-events: auto; touch-action: none; user-select: none; }
.wslot:hover { --edge-c: #ffffff55; }
.wslot kbd { display: grid; place-items: center; min-width: 26px; height: 28px; padding: 0 5px; font: 700 12px var(--display); color: var(--fire-hi); background: #ff7b1c1a; border: 1px solid #ff7b1c66; }
.wslot.firing { --edge-c: var(--fire); }
.wslot.firing kbd { background: var(--fire); color: var(--fire-ink); border-color: var(--fire); }
.wmeta { display: grid; gap: 4px; min-width: 0; flex: 1; }
.wmeta b { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ammo { height: 4px; background: #ffffff1a; overflow: hidden; -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); }
.ammo i { display: block; height: 100%; width: 100%; background: #eef3f6; transition: width .08s linear; }
.wstate { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.wslot.reloading .ammo i { background: var(--fire); }
.wslot.reloading .wstate { color: var(--fire-hi); }
.wslot.charging .ammo i { background: var(--lock); }
.wslot.ability { width: 168px; }
.wslot.ability kbd { color: var(--cyan); border-color: #46c8ef66; background: #46c8ef1a; font-size: 10px; }
.wslot.ability.active { --edge-c: var(--cyan); }
.wslot.ability .ammo i { background: var(--cyan); }
.wslot.holstered { opacity: .5; }
.sound { --edge-c: #ffffff26; position: absolute; right: 22px; top: 104px; padding: 7px 11px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sound[aria-pressed=true] { color: var(--text); }
.dpad { position: absolute; right: 16px; bottom: 16px; display: none; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 46px); gap: 5px; grid-template-areas: 'sl up sr' 'left down right' 'run run run'; z-index: 8; }
.dpad button { --edge-c: #ffffff30; --cut: 7px; color: #eef3f6; font-size: 15px; touch-action: none; user-select: none; }
.dpad button.held { --fill: #ff7b1c55; --edge-c: var(--fire); }
.dpad [data-key=ArrowUp] { grid-area: up; }
.dpad [data-key=ArrowLeft] { grid-area: left; }
.dpad [data-key=ArrowDown] { grid-area: down; }
.dpad [data-key=ArrowRight] { grid-area: right; }
.dpad .wide { grid-area: run; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.dpad [data-key=KeyQ] { grid-area: sl; }
.dpad [data-key=KeyE] { grid-area: sr; }
.firepad { position: absolute; left: 16px; bottom: 150px; display: none; grid-template-columns: repeat(2, 48px); gap: 5px; z-index: 8; }
.firepad button { --edge-c: #ff7b1c88; --fill: #3a200cd9; --cut: 7px; width: 48px; height: 44px; color: var(--text); font: 700 14px var(--display); touch-action: none; user-select: none; }
.firepad button.held { --fill: #ff7b1ccc; color: var(--fire-ink); }
.firepad .fab { --edge-c: #46c8ef99; --fill: #0c2733d9; font: 700 9px var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.tlayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tbar { --cut: 6px; --edge-c: #ffffff2e; --fill: #0b1118d9; position: absolute; left: 0; top: 0; width: 172px; padding: 6px 9px 7px; }
.tbar.aimed { --edge-c: var(--fire); }
.tbar.locking { --edge-c: #ffcf3a99; }
.tbar.locked { --edge-c: var(--lock); }
.tbar.dead { opacity: .55; }
.tname { display: flex; align-items: baseline; gap: 5px; font-size: 9px; }
.tname b { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tnote { font-size: 9px; color: var(--muted); }
.tlock, .theld { display: none; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--lock); }
.theld { color: var(--fire-hi); }
.tbar.locked .tlock, .tbar.locking .tlock, .tbar.held .theld { display: inline; }
.tdps { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--fire-hi); }
.thp { position: relative; height: 5px; margin: 5px 0 4px; background: #ffffff1c; overflow: hidden; }
.thp i, .thp em { position: absolute; left: 0; top: 0; bottom: 0; }
.thp em { background: #ffffff55; }
.thp i { z-index: 1; }
.tnum { font-size: 9px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tshield { height: 2px; margin-top: 3px; background: #46c8ef26; overflow: hidden; }
.tshield i { display: block; height: 100%; background: var(--cyan); }
.dmg { position: absolute; transform: translate(-50%, -50%); font: 700 14px var(--display); color: #ffd58a; text-shadow: 0 0 3px #000, 0 1px 2px #000; animation: dmgfloat .9s ease-out forwards; }
@keyframes dmgfloat { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -40px; } }
@media(pointer: coarse) { .dpad { display: grid; } .firepad { display: grid; } .controls-guide { display: none; } }
@media(max-width: 1100px) { .wslot { width: 120px; } .wbar { max-width: calc(100% - 130px); } }
@media(max-width: 900px) {
  .dapp { grid-template-columns: 1fr; grid-template-rows: 66vh auto; height: auto; min-height: 100dvh; }
  .arena { grid-row: 1; }
  .garage { grid-row: 2; border-right: 0; border-top: 1px solid var(--edge); overflow: visible; }
  .garage-content { overflow: visible; flex: none; }
  .g-head, .g-sec { padding: 20px; }
  .robots { max-height: 300px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .controls-guide { display: none; }
  .d-title { top: 16px; left: 16px; }
  .d-title h2 { font-size: 26px; }
  .speedo { top: 16px; right: 14px; padding: 8px 10px; min-width: 84px; }
  .speedo div:first-child { font-size: 22px; }
  .sound { top: 90px; right: 14px; font-size: 9px; }
  .dpad { display: grid; }
  .firepad { display: none; }
  .wbar { left: 14px; right: auto; bottom: 14px; transform: none; width: calc(100% - 196px); max-width: 240px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .wslot, .wslot.ability { width: auto; min-width: 0; padding: 7px 6px; gap: 5px; --cut: 6px; }
  .wslot.ability { grid-column: 1 / -1; }
  .wslot kbd { min-width: 20px; height: 24px; padding: 0 3px; font-size: 10px; }
  .wmeta b { font-size: 9px; }
  .wstate { font-size: 9px; }
  .focus-hint { display: none; }
  .tbar { width: 150px; }
}