.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body.in-game { --nav-h: 0px; }
body.in-game .nav, body.in-game .topbar { display: none; }

.tr { display: grid; gap: 10px; margin-top: 6px; }
.tr-bar { display: grid; grid-template-columns: 48px 1fr 1fr 48px; gap: 8px; align-items: center; }
.tr-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
}
.tr-icon:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) { .tr-icon:not(:disabled):hover { background: #222e63; } }
.tr-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.tr-stat span { font-size: .8rem; color: var(--muted); }
.tr-stat strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.tr-meter { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.tr-meter span { display: block; height: 100%; background: var(--lime); transform-origin: left; }

.tr-field {
  position: relative; height: clamp(400px, calc(100dvh - 116px), 560px); overflow: hidden;
  border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(160deg, #141b40, #0d1330);
}
.tr-field.is-active { touch-action: none; }
.tr-objects { position: absolute; inset: 0; }

.tr-obj {
  position: absolute; padding: 0; border: 0; background: none; border-radius: 50%;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  animation: tr-life var(--life, 1500ms) linear forwards;
}
.tr-obj svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.tr-bomb { border-radius: 30%; }
.tr-obj:active { filter: brightness(1.2); }
@keyframes tr-life { 0%, 65% { opacity: 1; } 100% { opacity: .4; } }
.tr-field.is-paused .tr-obj { animation-play-state: paused; visibility: hidden; }

.tr-pop {
  position: absolute; width: 40px; line-height: 28px; text-align: center; font-weight: 800;
  color: var(--lime); pointer-events: none; animation: tr-pop .45s ease-out forwards;
}
.tr-pop.neg { color: var(--danger); }
@keyframes tr-pop { to { transform: translateY(-22px); opacity: 0; } }

.tr-overlay { position: absolute; inset: 0; z-index: 2; display: flex; overflow-y: auto; padding: 16px; background: rgba(10,15,36,.95); }
.tr-panel { display: grid; gap: 8px; width: 100%; margin: auto; }
.tr-center { text-align: center; justify-items: center; }
.tr-panel h2 { font-size: 1.3rem; }
.tr-panel p { color: var(--muted); }
.tr-panel .btn { width: 100%; }
.tr-k { font-size: .9rem; }
.tr-big { font-size: 4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-hint { font-size: .9rem; }
.tr-panel .notice { margin: 0; text-align: left; }

.tr-legend { list-style: none; padding: 0; display: grid; gap: 6px; }
.tr-legend li {
  display: flex; align-items: center; gap: 12px; padding: 6px 10px; font-size: .95rem;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.tr-legend .ic { flex: none; width: 40px; height: 40px; }
.tr-legend svg { display: block; width: 100%; height: 100%; }
.tr-legend strong { margin-left: auto; white-space: nowrap; }

/* Target Rush — raund yakuni va natija statistikasi. */
.tr-stat strong, .tr-results dd { font-variant-numeric: tabular-nums; }
.tr.is-urgent .tr-stat:nth-child(3) strong { color: var(--danger); }
.tr.is-urgent .tr-meter span { background: var(--danger); }
.tr.is-urgent .tr-field { border-color: rgba(255, 122, 144, .65); }
.tr-meter span { transition: background .2s; }
.tr-results {
  width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 6px 0; text-align: left;
}
.tr-results > div {
  min-width: 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface);
}
.tr-results dt { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.tr-results dd { color: var(--text); font-size: 1.4rem; line-height: 1.3; font-weight: 750; }
.tr-overlay { overscroll-behavior: contain; }
.tr-panel { flex: 0 0 auto; }
.tr-icon:focus-visible, .tr-obj:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
@media (max-height: 560px) {
  .tr-field { height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-obj, .tr-pop { animation: none; }
  .tr-meter span { transition: none; }
}