/* ========================================================================== */
/* MMO Client Styles                                                          */
/* ========================================================================== */

@keyframes td-earn-pop {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.28) rotate(-4deg); }
  38%  { transform: scale(1.14) rotate(3deg); }
  58%  { transform: scale(1.07) rotate(-2deg); }
  78%  { transform: scale(1.03) rotate(1deg); }
  100% { transform: scale(1); }
}

.td-earn-pop {
  animation: td-earn-pop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes tdSplashPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes tdSpinGallery {
  to { transform: rotate(360deg); }
}

/* ========================================================================== */
/* In-Sector Store, Recovery Panel, And Mobile MMO Overlay                     */
/* ========================================================================== */

.td-mmo-store {
  display:flex;flex-direction:column;gap:10px;
  /* No padding-top: the scroll gutter it created showed cards sliding past
     above the sticky armory bar. The head carries the top inset instead. */
  padding:0 12px 12px;flex:1;overflow-y:auto;
}
.td-mmo-store-head {
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:1px solid rgba(125,211,252,0.18);
}
.td-mmo-eyebrow {
  color:#67e8f9;letter-spacing:.14em;font-family:'JetBrains Mono',monospace;
  font-size:.62rem;font-weight:800;text-transform:uppercase;
}
.td-mmo-head-title { color:#f8fafc;font-size:.96rem;font-weight:800;letter-spacing:-.01em;margin-top:2px; }
.td-mmo-head-coins {
  color:#fde68a;font-family:'JetBrains Mono',monospace;font-size:.74rem;
  background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.32);
  border-radius:999px;padding:3px 9px;flex-shrink:0;
}
.td-mmo-ai-card {
  display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;
  text-align:left;border:1px solid rgba(244,114,182,0.46);border-radius:14px;padding:6px 10px;
  color:#fce7f3;cursor:pointer;opacity:1;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  background:
    radial-gradient(circle at top left,rgba(236,72,153,0.30),transparent 45%),
    linear-gradient(135deg,rgba(88,28,135,0.55),rgba(15,23,42,0.82));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
}
.td-mmo-ai-card:hover {
  transform:translateY(-1px);border-color:rgba(244,114,182,0.85);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10),0 4px 20px rgba(236,72,153,0.30);
}
.td-mmo-ai-card:active { transform:translateY(0); }
.td-mmo-ai-glow {
  width:14px;height:24px;border-radius:999px;
  background:linear-gradient(180deg,#f9a8d4,#a855f7);
  box-shadow:0 0 16px rgba(236,72,153,0.50);
}
.td-mmo-ai-card strong { display:block;color:#fff1f2;font-size:.78rem;line-height:1.2; }
.td-mmo-ai-card small  { display:block;color:#fbcfe8;font-size:.62rem;line-height:1.2;margin-top:1px; }
.td-mmo-ai-badge       { color:#fdf2f8;font:900 .68rem/1 'JetBrains Mono',monospace;letter-spacing:.06em;white-space:nowrap; }
.td-mmo-section-title {
  display:flex;align-items:baseline;justify-content:space-between;
  color:#e2e8f0;font-weight:800;font-size:.74rem;letter-spacing:.05em;
  text-transform:uppercase;margin:4px 0 -2px;
}
.td-mmo-section-title small {
  color:#94a3b8;font:600 .62rem/1 'JetBrains Mono',monospace;text-transform:none;letter-spacing:.04em;
}
.td-mmo-store-grid { display:flex;flex-direction:column;gap:7px; }
.td-mmo-store-card {
  position:relative;display:flex;flex-direction:column;gap:4px;
  text-align:left;border:1px solid rgba(148,163,184,0.22);border-radius:13px;
  padding:9px 10px;color:#e2e8f0;cursor:pointer;background:rgba(15,23,42,0.72);
  transition:border-color .14s,background .14s,transform .12s;
}
.td-mmo-store-card::before {
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:var(--td-card-accent,#67e8f9);box-shadow:0 0 12px var(--td-card-accent,#67e8f9);
}
.td-mmo-store-card:hover:not(.locked),
.td-mmo-store-card.active {
  border-color:rgba(103,232,249,0.68);
  background:rgba(14,116,144,0.22);
}
.td-mmo-store-card.active { transform:translateY(-1px); }
.td-mmo-store-card.locked { opacity:.45;cursor:not-allowed; }
.td-mmo-store-card.unaffordable {
  border-color:rgba(248,113,113,0.55);
  background:linear-gradient(135deg,rgba(127,29,29,0.34),rgba(15,23,42,0.72));
}
.td-mmo-card-top {
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.td-mmo-card-name {
  color:var(--td-card-accent,#f8fafc);font-family:'JetBrains Mono',monospace;
  font-weight:800;font-size:.78rem;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65%;
  margin-right:auto; /* keeps cost pinned right when the hotkey badge is present */
}
.td-mmo-card-key {
  color:#94a3b8;font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;
  background:rgba(255,255,255,0.05);border:1px solid rgba(148,163,184,0.30);
  border-bottom-width:2px;border-radius:4px;padding:1px 5px;flex-shrink:0;
  align-self:center;line-height:1.2;
}
.td-mmo-store-card.active .td-mmo-card-key {
  color:#cffafe;border-color:rgba(103,232,249,0.55);
}
.td-mmo-card-cost {
  color:#fde68a;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
  background:rgba(251,191,36,0.08);border-radius:999px;padding:2px 7px;flex-shrink:0;
}
.td-mmo-card-cost.bad { color:#fecaca;background:rgba(239,68,68,0.18);border:1px solid rgba(248,113,113,0.38); }
.td-mmo-card-desc { color:#94a3b8;font-size:.66rem;line-height:1.4; }
.td-mmo-card-tags { display:flex;flex-wrap:wrap;gap:4px;margin-top:2px; }
.td-mmo-card-tag {
  color:#cbd5e1;font-family:'JetBrains Mono',monospace;font-size:.58rem;
  background:rgba(255,255,255,0.05);border:1px solid rgba(148,163,184,0.18);
  border-radius:999px;padding:1px 6px;letter-spacing:.04em;
}
.td-mmo-card-tag.special { color:#a7f3d0;border-color:rgba(34,197,94,0.32); }
.td-mmo-detail {
  border:1px solid rgba(34,197,94,0.40);border-radius:14px;padding:11px;
  background:linear-gradient(165deg,rgba(14,116,144,0.18),rgba(7,10,20,0.86));
  display:flex;flex-direction:column;gap:9px;
  animation:tdMmoDetailIn .16s ease-out;
}
@keyframes tdMmoDetailIn {
  from { opacity:0;transform:translateY(-4px); }
  to   { opacity:1;transform:translateY(0); }
}
.td-mmo-detail-head { display:flex;align-items:flex-start;justify-content:space-between;gap:8px; }
.td-mmo-detail-name { color:#f8fafc;font-size:.92rem;font-weight:800; }
.td-mmo-detail-flavor { color:#94a3b8;font-size:.64rem;line-height:1.4;margin-top:2px; }
.td-mmo-detail-cost { color:#a7f3d0;font-family:'JetBrains Mono',monospace;font-size:.86rem;font-weight:800;text-align:right; }
.td-mmo-detail-cost.bad { color:#fca5a5; }
.td-mmo-stat-grid {
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.72rem;
}
.td-mmo-stat-grid dt { color:#94a3b8;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase; }
.td-mmo-stat-grid dd { margin:0;color:#f8fafc;font-family:'JetBrains Mono',monospace;text-align:right;font-size:.72rem; }
.td-mmo-ranks {
  display:grid;grid-template-columns:1fr 1fr;gap:7px;
}
.td-mmo-rank {
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"label value" "slider slider";
  gap:3px 8px;align-items:center;border:1px solid rgba(255,255,255,0.08);border-radius:11px;
  padding:6px 8px 7px;background:linear-gradient(135deg,rgba(2,6,23,0.42),rgba(15,23,42,0.28));
}
.td-mmo-rank-label { grid-area:label;color:#d1fae5;font:900 .56rem/1 'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase; }
.td-mmo-rank-val   { grid-area:value;color:#fde68a;font:900 .60rem/1 'JetBrains Mono',monospace;text-align:right; }
.td-mmo-rank input[type=range] {
  grid-area:slider;width:100%;height:16px;accent-color:#67e8f9;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.td-mmo-rank input[type=range]::-webkit-slider-runnable-track {
  height:5px;border-radius:999px;
  background:linear-gradient(90deg,rgba(103,232,249,.75),rgba(34,197,94,.62));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.td-mmo-rank input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;
  border:2px solid #ecfeff;background:#22d3ee;box-shadow:0 2px 8px rgba(103,232,249,.40);
}
.td-mmo-rank input[type=range]::-moz-range-track {
  height:5px;border-radius:999px;background:linear-gradient(90deg,rgba(103,232,249,.75),rgba(34,197,94,.62));
}
.td-mmo-rank input[type=range]::-moz-range-thumb {
  width:14px;height:14px;border-radius:50%;border:2px solid #ecfeff;background:#22d3ee;
}
.td-mmo-rank-actions { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.td-mmo-mini-btn {
  border:1px solid rgba(248,250,252,0.18);background:rgba(15,23,42,0.86);color:#f8fafc;
  border-radius:10px;padding:7px 9px;cursor:pointer;font:800 .66rem/1 'JetBrains Mono',monospace;letter-spacing:.04em;
}
.td-mmo-mini-btn:hover { border-color:rgba(103,232,249,0.6);background:rgba(14,116,144,0.30); }
.td-mmo-mini-btn.max {
  border-color:rgba(251,191,36,0.42);color:#fef3c7;
  background:linear-gradient(135deg,rgba(251,191,36,0.18),rgba(14,116,144,0.18));
}
.td-mmo-mini-btn.max:hover { border-color:rgba(251,191,36,0.78); }
.td-mmo-buy-row { display:flex;gap:8px; }
.td-mmo-buy-main {
  flex:1;min-height:42px;border:1px solid rgba(236,253,245,0.34);border-radius:12px;
  background:linear-gradient(135deg,#22c55e,#0891b2);color:#04111d;cursor:pointer;
  font:1000 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 0 20px rgba(34,197,94,0.18),inset 0 1px 0 rgba(255,255,255,0.32);
}
.td-mmo-buy-main:hover:not(:disabled) { transform:translateY(-1px);filter:brightness(1.08); }
.td-mmo-buy-main:disabled {
  cursor:not-allowed;color:#fee2e2;
  background:linear-gradient(135deg,rgba(127,29,29,.95),rgba(51,65,85,.95));
  box-shadow:none;opacity:.85;
}
.td-mmo-cancel {
  min-height:42px;padding:0 14px;border:1px solid rgba(248,113,113,0.55);
  color:#fee2e2;background:linear-gradient(135deg,rgba(127,29,29,.9),rgba(239,68,68,.72));
  border-radius:12px;cursor:pointer;
  font:900 .74rem/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
}
.td-mmo-store-foot {
  color:#94a3b8;font-size:.62rem;line-height:1.45;
  border-top:1px solid rgba(148,163,184,0.10);padding-top:8px;
}
/* Recovery / comeback panel */
.td-mmo-recover {
  border:1px solid rgba(248,113,113,0.42);border-radius:14px;padding:11px;
  background:radial-gradient(circle at top right,rgba(248,113,113,0.18),transparent 50%),
             linear-gradient(165deg,rgba(127,29,29,0.30),rgba(7,10,20,0.85));
  display:flex;flex-direction:column;gap:9px;
}
.td-mmo-recover h4 { margin:0;color:#fecaca;font-size:.96rem;font-weight:800; }
.td-mmo-recover p  { margin:0;color:#fda4af;font-size:.7rem;line-height:1.45; }
.td-mmo-comeback-bar {
  display:flex;flex-direction:column;gap:5px;
  padding:9px;border:1px solid rgba(167,243,208,0.22);border-radius:11px;
  background:rgba(2,6,23,0.42);
}
.td-mmo-comeback-bar header {
  display:flex;justify-content:space-between;align-items:baseline;
  color:#a7f3d0;font:800 .60rem/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
}
.td-mmo-comeback-bar header b { color:#fde68a;font-size:.72rem; }
.td-mmo-comeback-track {
  height:7px;border-radius:999px;background:rgba(15,23,42,0.78);overflow:hidden;
  border:1px solid rgba(148,163,184,0.18);
}
.td-mmo-comeback-fill {
  height:100%;background:linear-gradient(90deg,#22c55e,#67e8f9);
  box-shadow:0 0 12px rgba(34,197,94,0.42);transition:width .35s ease;
}
.td-mmo-reclaim-btn {
  width:100%;min-height:46px;border:1px solid rgba(103,232,249,0.6);border-radius:13px;
  background:linear-gradient(135deg,#22c55e,#0891b2);color:#04111d;cursor:pointer;
  font:1000 .82rem/1 'JetBrains Mono',monospace;letter-spacing:.10em;text-transform:uppercase;
  box-shadow:0 0 22px rgba(34,197,94,0.25),inset 0 1px 0 rgba(255,255,255,0.32);
}
.td-mmo-reclaim-btn:hover:not(:disabled) { transform:translateY(-1px);filter:brightness(1.10); }
.td-mmo-reclaim-btn:disabled {
  cursor:not-allowed;color:#fee2e2;
  background:linear-gradient(135deg,rgba(127,29,29,.85),rgba(51,65,85,.85));
  box-shadow:none;opacity:.85;
}
.td-mmo-dev-revive {
  width:100%;padding:7px 10px;border:1px dashed rgba(176,96,255,0.55);border-radius:10px;
  background:rgba(176,96,255,0.10);color:#ddd6fe;cursor:pointer;
  font:800 .66rem/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
}
.td-mmo-dev-revive:hover { background:rgba(176,96,255,0.20);border-style:solid; }
#tdWorldOverlay,
#tdWorldOverlay * {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#tdWorldOverlay input,
#tdWorldOverlay textarea,
#tdWorldOverlay select,
#tdWorldOverlay [contenteditable="true"] {
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
/* World tracker hover — styled via CSS :hover (not JS mouseenter) so the
   glow stays steady when the per-tick re-render rebuilds the card nodes
   under the cursor. Accent colors arrive as inline custom properties;
   !important is needed to beat the inline base styles. */
#tdWorldTracker .td-world-tracker-card[role="button"]:hover,
#tdWorldTracker .td-world-tracker-card[role="button"]:focus-visible {
  border-color:var(--td-glow, rgba(56,212,184,0.9))!important;
  background:rgba(12,17,28,0.92)!important;
  box-shadow:0 0 12px -3px var(--td-glow, rgba(56,212,184,0.6));
  outline:none;
}
#tdWorldTracker .td-world-tracker-head:hover,
#tdWorldTracker .td-world-tracker-head:focus-visible {
  border-color:var(--td-hover-border, rgba(125,211,252,0.5))!important;
  color:var(--td-hover-color, #e0f2fe)!important;
  outline:none;
}
.td-mobile-panel-handle,
.td-mobile-tracker-toggle,
.td-mobile-placement-bar,
.td-mobile-avatar-controls { display:none; }
#tdWorldOverlay.td-mobile-layout {
  --td-mobile-sheet-peek:66px;
  --td-mobile-sheet-max:min(72dvh,430px);
}
#tdWorldOverlay.td-mobile-layout * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#tdWorldOverlay.td-mobile-layout .td-mmo-topbar {
  gap:0.34rem!important;
  padding:calc(env(safe-area-inset-top,0px) + 0.34rem) calc(env(safe-area-inset-right,0px) + 0.7rem) 0.36rem calc(env(safe-area-inset-left,0px) + 0.45rem)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
#tdWorldOverlay.td-mobile-layout .td-mmo-topbar::-webkit-scrollbar { display:none; }
#tdWorldOverlay.td-mobile-layout .td-mmo-title,
#tdWorldOverlay.td-mobile-layout .td-mmo-sep { display:none!important; }
#tdWorldOverlay.td-mobile-layout .td-mmo-topbar button,
#tdWorldOverlay.td-mobile-layout #tdCoinDisplay,
#tdWorldOverlay.td-mobile-layout #tdDevBadge {
  min-height:34px!important;
  padding:0.34rem 0.48rem!important;
  font-size:0.6rem!important;
  border-radius:7px!important;
}
/* Keep the music widget wide enough for both the track selector and mute toggle. */
#tdWorldOverlay.td-mobile-layout #tdMusicMount { max-width:none;overflow:visible;flex-shrink:0; }
#tdWorldOverlay.td-mobile-layout #tdMusicMount [data-td-music-mute] { min-height:34px; }
#tdWorldOverlay.td-mobile-layout #tdCanvasWrap {
  margin-right:0!important;
  touch-action:none;
}
#tdWorldOverlay.td-mobile-layout #tdWorldCanvas { touch-action:none; }
#tdWorldOverlay.td-mobile-layout input,
#tdWorldOverlay.td-mobile-layout textarea,
#tdWorldOverlay.td-mobile-layout select {
  font-size:16px!important;
}
#tdWorldOverlay.td-mobile-layout #tdWorldTracker {
  left:0.48rem!important;
  right:0.48rem!important;
  top:2.9rem!important;
  max-width:none!important;
  display:none!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0.28rem!important;
  pointer-events:auto!important;
}
#tdWorldOverlay.td-mobile-layout.td-mobile-tracker-open #tdWorldTracker {
  display:grid!important;
}
#tdWorldOverlay.td-mobile-layout #tdWorldTracker > div {
  min-width:0!important;
  padding:0.34rem 0.4rem!important;
  border-radius:6px!important;
}
/* Mobile has its own STATUS toggle: hide the desktop header tab and ignore
   the desktop collapsed state so the 2-col grid always shows every card. */
#tdWorldOverlay.td-mobile-layout #tdWorldTracker .td-world-tracker-head {
  display:none!important;
}
#tdWorldOverlay.td-mobile-layout #tdWorldTracker .td-world-tracker-card {
  display:block!important;
}
#tdWorldOverlay.td-mobile-layout .td-world-tracker-label {
  font-size:0.48rem!important;
  margin-bottom:0.1rem!important;
}
#tdWorldOverlay.td-mobile-layout .td-world-tracker-value {
  font-size:0.64rem!important;
  white-space:normal!important;
  line-height:1.15!important;
}
#tdWorldOverlay.td-mobile-layout .td-world-tracker-sub {
  font-size:0.5rem!important;
  white-space:normal!important;
  line-height:1.15!important;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-tracker-toggle {
  display:flex;
  position:absolute;
  left:calc(0.48rem + env(safe-area-inset-left,0px));
  top:0.48rem;
  z-index:13;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 0.72rem;
  border:1px solid rgba(125,211,252,0.38);
  border-radius:9px;
  background:rgba(7,10,20,0.88);
  color:#e0f2fe;
  font:900 0.6rem/1 'JetBrains Mono',monospace;
  letter-spacing:0.08em;
  box-shadow:0 8px 22px rgba(0,0,0,0.32);
  touch-action:manipulation;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-tracker-toggle[hidden] {
  display:none!important;
}
#tdWorldOverlay.td-mobile-layout.td-mobile-tracker-open .td-mobile-tracker-toggle {
  border-color:rgba(56,212,184,0.72);
  color:#ccfbf1;
  background:rgba(6,78,59,0.72);
}
#tdWorldOverlay.td-mobile-layout #tdChatMount {
  left:0.48rem!important;
  right:0.48rem!important;
  bottom:calc(var(--td-mobile-sheet-peek) + env(safe-area-inset-bottom,0px) + 0.55rem)!important;
  width:auto!important;
  max-height:34dvh;
}
#tdWorldOverlay.td-mobile-layout #tdChatMount.td-chat-collapsed-state {
  width:36px!important;
  height:36px!important;
  left:0.48rem!important;
  right:auto!important;
  overflow:hidden!important;
  border-radius:8px!important;
  background:rgba(6,9,15,0.95)!important;
  border:1px solid rgba(56,212,184,0.4)!important;
}
#tdWorldOverlay.td-mobile-layout #tdChatMount.td-chat-collapsed-state > div {
  height:100%!important;
  border:none!important;
  background:transparent!important;
}
#tdWorldOverlay.td-mobile-layout #tdChatMount.td-chat-collapsed-state > div > div:first-child {
  height:100%!important;
  padding:0!important;
  border-bottom:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#tdWorldOverlay.td-mobile-layout #tdChatMount.td-chat-collapsed-state > div > div:first-child > div:not(:last-child) {
  display:none!important;
}
#tdWorldOverlay.td-mobile-layout #tdChatMount.td-chat-collapsed-state > div > div:first-child > div:last-child {
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:1.2rem!important;
  font-weight:1000!important;
  color:#38d4b8!important;
}
#tdWorldOverlay.td-mobile-layout #tdChatMount.td-chat-collapsed-state > div > div:not(:first-child) {
  display:none!important;
}
#tdWorldOverlay.td-mobile-layout #tdWorldPanel,
#tdWorldOverlay.td-mobile-layout #tdDevPanel {
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:min(var(--td-mobile-sheet-max), calc(100dvh - 76px))!important;
  border-left:0!important;
  border-top:1px solid rgba(125,211,252,0.28)!important;
  border-radius:15px 15px 0 0!important;
  box-shadow:0 -18px 44px rgba(0,0,0,0.46)!important;
  padding-bottom:env(safe-area-inset-bottom,0px)!important;
  transform:translateY(calc(100% - var(--td-mobile-sheet-peek)))!important;
  transition:transform 0.2s ease!important;
}
#tdWorldOverlay.td-mobile-layout #tdWorldPanel.td-sheet-expanded,
#tdWorldOverlay.td-mobile-layout #tdDevPanel.td-sheet-expanded {
  transform:translateY(0)!important;
}
#tdWorldOverlay.td-mobile-layout #tdWorldPanel.td-sheet-hidden,
#tdWorldOverlay.td-mobile-layout #tdDevPanel.td-sheet-hidden {
  transform:translateY(100%)!important;
}
#tdWorldOverlay.td-mobile-layout.td-mobile-panel-over-controls .td-mobile-avatar-controls,
#tdWorldOverlay.td-mobile-layout.td-mobile-panel-over-controls .td-mobile-placement-bar,
#tdWorldOverlay.td-mobile-layout.td-mobile-panel-over-controls .td-mobile-placement-bar.is-visible {
  display:none!important;
  pointer-events:none!important;
}
#tdWorldOverlay.td-mobile-layout .td-sector-panel-header {
  padding:0.55rem 0.72rem!important;
}
#tdWorldOverlay.td-mobile-layout .td-sector-panel-title {
  font-size:0.72rem!important;
  line-height:1.2!important;
}
#tdWorldOverlay.td-mobile-layout .td-sector-panel-body {
  padding:0.55rem 0.72rem calc(env(safe-area-inset-bottom,0px) + 0.65rem)!important;
  gap:0.55rem!important;
}
#tdWorldOverlay.td-mobile-layout .td-sector-panel-meta {
  gap:0.36rem 0.6rem!important;
}
#tdWorldOverlay.td-mobile-layout .td-sector-panel-actions {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0.42rem!important;
  margin-top:0.1rem!important;
}
#tdWorldOverlay.td-mobile-layout .td-sector-panel-actions button {
  width:100%!important;
  min-height:40px;
  padding:0.42rem 0.34rem!important;
  border-radius:7px!important;
  font-size:0.6rem!important;
  line-height:1.15!important;
  white-space:normal;
  overflow-wrap:anywhere;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-panel-handle {
  display:flex;
  position:absolute;
  left:50%;
  bottom:calc(var(--td-mobile-sheet-peek) + env(safe-area-inset-bottom,0px) - 26px);
  z-index:38;
  transform:translateX(-50%);
  align-items:center;
  justify-content:center;
  gap:0.42rem;
  min-width:136px;
  min-height:40px;
  padding:0 0.92rem;
  border:1px solid rgba(125,211,252,0.62);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(15,23,42,0.96),rgba(8,13,26,0.96));
  color:#e0f2fe;
  font:800 0.68rem/1 'JetBrains Mono',monospace;
  letter-spacing:0.08em;
  box-shadow:0 10px 26px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.14);
  touch-action:manipulation;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-panel-handle::before {
  content:'';
  width:0.54rem;
  height:0.54rem;
  border-left:2px solid currentColor;
  border-top:2px solid currentColor;
  opacity:0.9;
  transform:rotate(225deg) translateY(1px);
}
#tdWorldOverlay.td-mobile-layout .td-mobile-panel-handle[aria-expanded="false"]::before {
  transform:rotate(45deg) translateY(1px);
}
#tdWorldOverlay.td-mobile-layout .td-mobile-panel-handle:active {
  transform:translateX(-50%) translateY(1px);
  filter:brightness(1.12);
}
#tdWorldOverlay.td-mobile-layout .td-mobile-panel-handle[hidden] { display:none!important; }
#tdWorldOverlay.td-mobile-layout.td-mobile-placement-mode .td-mobile-avatar-controls,
#tdWorldOverlay.td-mobile-layout.td-mobile-placement-mode .td-mobile-panel-handle {
  display:none!important;
  pointer-events:none!important;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-sector-actions {
  left:calc(0.72rem + env(safe-area-inset-left,0px))!important;
  right:calc(0.72rem + env(safe-area-inset-right,0px))!important;
  top:auto!important;
  bottom:calc(var(--td-mobile-sheet-peek) + env(safe-area-inset-bottom,0px) + 0.7rem)!important;
  min-width:0!important;
  width:auto!important;
  border-radius:13px!important;
  padding:0.72rem!important;
  z-index:37!important;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-sector-actions button {
  min-height:44px;
  border-radius:9px!important;
  font-size:0.74rem!important;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-placement-bar {
  display:none;
  position:absolute;
  left:calc(0.72rem + env(safe-area-inset-left,0px));
  right:calc(0.72rem + env(safe-area-inset-right,0px));
  bottom:calc(env(safe-area-inset-bottom,0px) + 0.75rem);
  z-index:39;
  width:auto;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0.5rem;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-placement-bar.is-visible {
  display:grid;
  align-items:center;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-placement-cancel {
  width:auto;
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(248,113,113,0.62);
  background:rgba(127,29,29,0.82);
  color:#fee2e2;
  font:900 0.82rem/1 'JetBrains Mono',monospace;
  box-shadow:0 8px 22px rgba(0,0,0,0.32);
  touch-action:manipulation;
  padding:0 0.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-placement-confirm {
  width:auto;
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(56,212,184,0.62);
  background:rgba(12,94,82,0.88);
  color:#ecfdf5;
  font:900 0.82rem/1 'JetBrains Mono',monospace;
  box-shadow:0 8px 22px rgba(0,0,0,0.32);
  touch-action:manipulation;
  padding:0 0.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-avatar-controls {
  display:flex;
  position:absolute;
  inset:auto 0 0 0;
  z-index:32;
  pointer-events:none;
  padding:0 0.72rem calc(env(safe-area-inset-bottom,0px) + 0.7rem);
  justify-content:space-between;
  align-items:flex-end;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-stick,
#tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster {
  pointer-events:auto;
  touch-action:none;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-stick {
  width:108px;
  height:108px;
  border-radius:50%;
  border:1px solid rgba(125,211,252,0.34);
  background:radial-gradient(circle,rgba(56,212,184,0.18),rgba(7,10,20,0.72));
  box-shadow:0 12px 30px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.06);
  position:relative;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-stick-knob {
  position:absolute;
  left:50%;
  top:50%;
  width:42px;
  height:42px;
  margin:-21px 0 0 -21px;
  border-radius:50%;
  background:#67e8f9;
  box-shadow:0 0 18px rgba(103,232,249,0.45);
  transform:translate(0,0);
}
/* Stop iOS long-press from selecting/highlighting a button's label text
   and drop the grey tap flash while players hold FIRE/CHARGE/DASH down. */
#tdWorldOverlay.td-mobile-layout button,
#tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster,
#tdWorldOverlay.td-mobile-layout .td-mobile-stick {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster {
  display:grid;
  grid-template-columns:repeat(2,58px);
  gap:0.42rem;
  justify-content:end;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster button {
  min-height:54px;
  border:1px solid rgba(125,211,252,0.38);
  border-radius:14px;
  background:rgba(7,10,20,0.82);
  color:#e0f2fe;
  font:900 0.62rem/1 'JetBrains Mono',monospace;
  letter-spacing:0.04em;
  box-shadow:0 10px 24px rgba(0,0,0,0.34);
  touch-action:manipulation;
}
#tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster .td-mobile-fire {
  grid-row:span 2;
  min-height:116px;
  color:#04111d;
  background:linear-gradient(180deg,#67e8f9,#22c55e);
  border-color:rgba(236,253,245,0.72);
}
#tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster .td-mobile-charge {
  color:#fde68a;
  border-color:rgba(251,191,36,0.58);
}
#tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster .td-mobile-dash {
  color:#bfdbfe;
  border-color:rgba(79,143,255,0.58);
}
#tdWorldOverlay.td-mobile-layout .td-mmo-store {
  padding:0 12px 16px;
}
#tdWorldOverlay.td-mobile-layout .td-mmo-detail {
  padding:10px 12px 16px;
}
#tdWorldOverlay.td-mobile-layout .td-mmo-store-card,
#tdWorldOverlay.td-mobile-layout .td-mmo-ai-card,
#tdWorldOverlay.td-mobile-layout .td-mmo-buy-main,
#tdWorldOverlay.td-mobile-layout .td-mmo-cancel {
  min-height:44px;
}
@media (orientation:landscape) and (pointer:coarse) {
  #tdWorldOverlay.td-mobile-layout {
    --td-mobile-sheet-peek:54px;
    --td-mobile-sheet-max:min(70dvh,320px);
  }
  #tdWorldOverlay.td-mobile-layout #tdWorldTracker,
  #tdWorldOverlay.td-mobile-layout.td-mobile-tracker-open #tdWorldTracker { display:none!important; }
  #tdWorldOverlay.td-mobile-layout .td-mobile-tracker-toggle { display:none!important; }
  #tdWorldOverlay.td-mobile-layout .td-mobile-stick {
    width:94px;
    height:94px;
  }
  #tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster {
    grid-template-columns:repeat(2,52px);
  }
  #tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster button { min-height:48px; }
  #tdWorldOverlay.td-mobile-layout .td-mobile-action-cluster .td-mobile-fire { min-height:104px; }
}

/* Loop selector styling */
.td-mmo-loop-selector {
  display: flex;
  gap: 4px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 2px;
  align-items: center;
}
.td-mmo-loop-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.td-mmo-loop-btn:hover:not(.locked):not(.active) {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
}
.td-mmo-loop-btn.active {
  color: #04111d;
  background: linear-gradient(135deg, #67e8f9, #22c55e);
  box-shadow: 0 0 8px rgba(103, 232, 249, 0.3);
}
.td-mmo-loop-btn.locked {
  opacity: 0.45;
  cursor: not-allowed;
  font-size: 0.58rem;
  color: #64748b;
}
.td-mmo-loop-btn.locked .lvl {
  font-size: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 4px;
  border-radius: 4px;
  color: #94a3b8;
  margin-left: 2px;
}

/* =====================================================================
   iOS / MOBILE PERFORMANCE + FEEL PASS (additive — no visual redesign)
   ===================================================================== */

/* 1 ▸ Compositor-layer promotion for the chrome that floats above the
   sector/world canvas. The canvas repaints 30-40×/s on phones; keeping
   these surfaces on their own GPU layers means Safari composites them
   instead of re-painting them with every canvas frame. The bottom sheet
   already animates transform, so will-change also keeps its layer warm
   across open/close instead of re-rasterizing at each toggle. */
#tdWorldOverlay .td-mmo-topbar,
#tdWorldOverlay #tdChatMount,
#tdWorldOverlay #tdWorldTracker,
#tdWorldOverlay #tdWorldPanel,
#tdWorldOverlay #tdDevPanel,
#tdWorldOverlay .td-mobile-panel-handle,
#tdWorldOverlay .td-mobile-tracker-toggle,
#tdWorldOverlay .td-mobile-placement-bar,
#tdWorldOverlay .td-mobile-avatar-controls {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* The joystick knob is moved via inline transform every touch frame —
   promote it so the thumb tracking never leaves the compositor. */
#tdWorldOverlay .td-mobile-stick-knob {
  will-change: transform;
}

/* 2 ▸ Press feedback. Hover styles never fire on touch, so taps on the
   action buttons get an immediate springy response instead — pure
   transform/filter, so it stays composite-only. */
@media (pointer: coarse) {
  #tdWorldOverlay .td-mmo-topbar button:active,
  #tdWorldOverlay .td-mobile-sector-actions button:active,
  #tdWorldOverlay .td-sector-panel-actions button:active,
  #tdWorldOverlay .td-mobile-placement-confirm:active,
  #tdWorldOverlay .td-mobile-placement-cancel:active {
    transform: scale(0.96);
    filter: brightness(1.15);
  }
  #tdWorldOverlay .td-mobile-action-cluster button:active {
    transform: scale(0.92);
    filter: brightness(1.2);
  }

  /* Momentum scrolling inside the sheet/store without dragging the page. */
  #tdWorldOverlay #tdWorldPanel,
  #tdWorldOverlay #tdDevPanel,
  #tdWorldOverlay .td-mmo-store {
    overscroll-behavior: contain;
  }
}

/* 3 ▸ Honor system-level reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .td-earn-pop {
    animation: none !important;
  }
  #tdWorldOverlay #tdWorldPanel,
  #tdWorldOverlay #tdDevPanel {
    transition: none !important;
  }
}

/* =========================================================
   PLAYER-TO-PLAYER TRADING
   Floating avatar menu, incoming request prompt, trade window.
========================================================= */

/* Floating context menu above a clicked avatar (fixed where clicked) */
.td-trade-popup {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  background: rgba(7, 10, 20, 0.94);
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 14px rgba(251, 191, 36, 0.18);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  animation: tdTradePop 0.14s ease-out;
}
@keyframes tdTradePop {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 6px)); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}
.td-trade-popup::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(7, 10, 20, 0.94);
  border-right: 1px solid rgba(251, 191, 36, 0.55);
  border-bottom: 1px solid rgba(251, 191, 36, 0.55);
}
.td-trade-popup-name {
  color: #e2e8f0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.td-trade-popup-btn {
  border: 1px solid #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  font: 700 0.64rem/1 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: 0.06em;
  padding: 0.34rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.td-trade-popup-btn:hover:not(:disabled) { background: rgba(251, 191, 36, 0.28); }
.td-trade-popup-btn:disabled { opacity: 0.5; cursor: default; }
.td-trade-popup-close {
  border: none;
  background: none;
  color: #64748b;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.15rem 0.25rem;
}
.td-trade-popup-close:hover { color: #e2e8f0; }

/* Incoming trade request — floats over the requester's head */
.td-trade-prompt {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 61;
  width: max-content;
  max-width: 230px;
  padding: 0.55rem 0.7rem;
  background: rgba(7, 10, 20, 0.96);
  border: 1px solid rgba(56, 212, 184, 0.6);
  border-radius: 7px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 212, 184, 0.2);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  animation: tdTradePop 0.14s ease-out;
}
.td-trade-prompt-centered {
  left: 50% !important;
  top: 18% !important;
}
.td-trade-prompt-text {
  color: #e2e8f0;
  font-size: 0.66rem;
  line-height: 1.45;
  margin-bottom: 0.45rem;
}
.td-trade-prompt-actions { display: flex; gap: 0.4rem; }

/* Shared small buttons */
.td-trade-btn {
  border-radius: 4px;
  cursor: pointer;
  font: 700 0.66rem/1 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: 0.06em;
  padding: 0.42rem 0.7rem;
}
.td-trade-btn:disabled { opacity: 0.45; cursor: default; }
.td-trade-btn-go {
  border: 1px solid #38d4b8;
  background: rgba(56, 212, 184, 0.14);
  color: #38d4b8;
  flex: 1;
}
.td-trade-btn-go:hover:not(:disabled) { background: rgba(56, 212, 184, 0.3); }
.td-trade-btn-no {
  border: 1px solid #ef4444;
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  flex: 1;
}
.td-trade-btn-no:hover:not(:disabled) { background: rgba(239, 68, 68, 0.25); }
.td-trade-btn-confirm {
  border: 1px solid #fbbf24;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.32), rgba(251, 191, 36, 0.16));
  color: #fde68a;
  flex: 2;
}
.td-trade-btn-confirm:hover:not(:disabled) { background: rgba(251, 191, 36, 0.4); }
.td-trade-btn-add {
  border: 1px dashed rgba(125, 211, 252, 0.5);
  background: rgba(56, 132, 255, 0.07);
  color: #7dd3fc;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.7rem;
  border-radius: 7px;
}
.td-trade-btn-add:hover { background: rgba(56, 132, 255, 0.18); }

/* The trade window */
.td-trade-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(8, 12, 26, 0.72), rgba(2, 4, 10, 0.9));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: td-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.td-trade-win {
  position: relative;
  width: min(840px, 100%);
  max-height: min(720px, calc(100vh - 32px));
  overflow-y: auto;
  background:
    radial-gradient(circle at 16% -10%, rgba(251, 191, 36, 0.08), transparent 42%),
    radial-gradient(circle at 88% 112%, rgba(56, 132, 255, 0.07), transparent 46%),
    linear-gradient(150deg, #0a1020 0%, #05070e 58%, #070b16 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 14px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.85),
    0 0 44px rgba(251, 191, 36, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  animation: td-scale-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.td-trade-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid rgba(251, 191, 36, 0.22);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02) 55%, transparent);
}
.td-trade-head-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.18), inset 0 0 8px rgba(251, 191, 36, 0.08);
  flex-shrink: 0;
}
.td-trade-head-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.td-trade-head-title {
  color: #fbbf24;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}
.td-trade-head-partner {
  color: #94a3b8;
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-trade-head-partner b { color: #e2e8f0; font-weight: 700; }
.td-trade-head .td-trade-popup-close { font-size: 0.95rem; padding: 0.3rem 0.45rem; }

/* Lifecycle step strip — BUILD OFFERS → BOTH ACCEPT → CONFIRM */
.td-trade-steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(7, 10, 20, 0.5);
}
.td-trade-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #475569;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.td-trade-step b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.06);
  color: #64748b;
  font-size: 0.58rem;
}
.td-trade-step.is-now { color: #fde68a; }
.td-trade-step.is-now b {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}
.td-trade-step.is-done { color: #38d4b8; }
.td-trade-step.is-done b {
  border-color: rgba(56, 212, 184, 0.6);
  background: rgba(56, 212, 184, 0.12);
  color: #38d4b8;
}
.td-trade-step-line {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.28), rgba(148, 163, 184, 0.08));
}
.td-trade-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(251, 191, 36, 0.16);
  flex: 1;
}
.td-trade-col {
  background: #060912;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 270px;
  transition: box-shadow 0.25s ease;
}
.td-trade-col-me {
  background: #081020;
}
.td-trade-col.is-accepted {
  box-shadow: inset 0 0 0 1px rgba(56, 212, 184, 0.35), inset 0 0 28px rgba(56, 212, 184, 0.05);
}
.td-trade-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.td-trade-col-head > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-trade-col-me .td-trade-col-head { color: #7dd3fc; }
.td-trade-col-badge {
  flex-shrink: 0;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #64748b;
  background: rgba(148, 163, 184, 0.05);
  transition: all 0.2s ease;
}
.td-trade-col-badge.is-on {
  border-color: rgba(56, 212, 184, 0.55);
  color: #38d4b8;
  background: rgba(56, 212, 184, 0.1);
  box-shadow: 0 0 10px rgba(56, 212, 184, 0.18);
}
.td-trade-coins {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.04);
  color: #fbbf24;
  font-size: 0.85rem;
  font-weight: 700;
}
.td-trade-coin-sign {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(251, 191, 36, 0.5);
  background: radial-gradient(circle at 35% 30%, rgba(253, 230, 138, 0.35), rgba(251, 191, 36, 0.1));
  font-size: 0.7rem;
  flex-shrink: 0;
}
.td-trade-coin-input {
  width: 130px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 6px;
  color: #fde68a;
  font: 700 0.85rem 'JetBrains Mono', 'Courier New', monospace;
  padding: 0.4rem 0.5rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.td-trade-coin-input:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18);
}
.td-trade-coin-have { color: #64748b; font-size: 0.62rem; font-weight: 400; }
.td-trade-coin-ro { color: #fde68a; font-size: 0.85rem; }
.td-trade-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-content: flex-start;
  flex: 1;
}
.td-trade-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: #e2e8f0;
  padding: 0.42rem 0.6rem;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.04);
  max-width: 100%;
  transition: all 0.15s ease;
}
.td-trade-chip:hover {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(148, 163, 184, 0.08);
}
.td-trade-chip-weapon     { border-color: rgba(6, 182, 212, 0.4);  background: rgba(6, 182, 212, 0.05); }
.td-trade-chip-weapon:hover { 
  border-color: rgba(6, 182, 212, 0.7);  
  background: rgba(6, 182, 212, 0.12);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.15);
  transform: translateY(-1px);
}
.td-trade-chip-consumable { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.05); }
.td-trade-chip-consumable:hover { 
  border-color: rgba(168, 85, 247, 0.7); 
  background: rgba(168, 85, 247, 0.12);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.15);
  transform: translateY(-1px);
}
.td-trade-chip-sector     { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.05); }
.td-trade-chip-sector:hover { 
  border-color: rgba(251, 191, 36, 0.7); 
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.15);
  transform: translateY(-1px);
}
.td-trade-chip-empty      { color: #475569; font-size: 0.62rem; font-style: italic; }
.td-trade-chip-x {
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 0.6rem;
  cursor: pointer;
  padding: 0 0.1rem;
}
.td-trade-chip-x:hover { color: #f87171; }
/* My side: big accept toggle. Their side: quiet state banner. */
.td-trade-accept-btn {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(56, 212, 184, 0.5);
  background: rgba(56, 212, 184, 0.08);
  color: #38d4b8;
  font: 800 0.72rem/1.2 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: 0.08em;
  padding: 0.68rem 0.7rem;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.td-trade-accept-btn:hover:not(:disabled) { background: rgba(56, 212, 184, 0.18); }
.td-trade-accept-btn:active:not(:disabled) { transform: scale(0.99); }
.td-trade-accept-btn:disabled { opacity: 0.45; cursor: default; }
.td-trade-accept-btn.is-on {
  background: linear-gradient(180deg, rgba(56, 212, 184, 0.28), rgba(56, 212, 184, 0.12));
  box-shadow: 0 0 16px rgba(56, 212, 184, 0.18), inset 0 0 10px rgba(56, 212, 184, 0.08);
  color: #a7f3d0;
}
.td-trade-accept-state {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  color: #64748b;
  font: 800 0.7rem/1.2 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: 0.08em;
  padding: 0.68rem 0.7rem;
  transition: all 0.2s ease;
}
.td-trade-accept-state.is-on {
  border: 1px solid rgba(56, 212, 184, 0.55);
  background: rgba(56, 212, 184, 0.1);
  color: #38d4b8;
  box-shadow: 0 0 14px rgba(56, 212, 184, 0.12);
}
.td-trade-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.15rem;
  color: #94a3b8;
  font-size: 0.68rem;
  line-height: 1.5;
  border-top: 1px solid rgba(251, 191, 36, 0.16);
  background: rgba(7, 10, 20, 0.4);
}
.td-trade-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
  animation: tdTradeBlink 1.6s ease-in-out infinite;
}
.td-trade-status.is-ready    { color: #fde68a; }
.td-trade-status.is-settling { color: #7dd3fc; }
@keyframes tdTradeBlink {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@keyframes td-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes td-scale-up {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.td-trade-foot {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 1.15rem 1rem;
}
.td-trade-foot .td-trade-btn {
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem;
  border-radius: 8px;
}
/* Both sides accepted → the finish line glows so the next move is obvious. */
.td-trade-btn-confirm:not(:disabled) { animation: tdTradeReady 1.5s ease-in-out infinite; }
@keyframes tdTradeReady {
  0%, 100% { box-shadow: 0 0 6px rgba(251, 191, 36, 0.15); }
  50%      { box-shadow: 0 0 22px rgba(251, 191, 36, 0.45); }
}

/* Inventory / sector picker (sheet over the whole window) */
.td-trade-picker {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 7, 14, 0.97);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(125, 211, 252, 0.35);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  animation: td-fade-in 0.15s ease-out;
}
.td-trade-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.15rem;
  color: #7dd3fc;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(125, 211, 252, 0.2);
  background: linear-gradient(90deg, rgba(56, 132, 255, 0.08), transparent);
}
.td-trade-picker-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.td-trade-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.05);
  color: #e2e8f0;
  border-radius: 7px;
  padding: 0.6rem 0.75rem;
  font: 600 0.7rem 'JetBrains Mono', 'Courier New', monospace;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.td-trade-picker-row:hover { border-color: #7dd3fc; background: rgba(56, 132, 255, 0.12); }
.td-trade-picker-sub { color: #64748b; font-size: 0.62rem; }
.td-trade-picker-empty {
  color: #64748b;
  font-size: 0.68rem;
  line-height: 1.6;
  padding: 1.2rem 0.6rem;
  text-align: center;
}

@media (max-width: 600px) {
  .td-trade-win { max-height: calc(100dvh - 24px); }
  .td-trade-cols { grid-template-columns: 1fr; }
  .td-trade-col { min-height: 0; }
  .td-trade-steps { padding: 0.55rem 0.8rem; gap: 0.35rem; }
  .td-trade-step { font-size: 0.54rem; }
  .td-trade-head { padding: 0.8rem 0.9rem; }
  .td-trade-foot { padding: 0.7rem 0.9rem 0.85rem; }
}

/* =====================================================================
   SECTOR RIGHT PANEL — loadout dock + armory freeze-pane
   ===================================================================== */

/* Store head is now a single line: identity left, live balance right.
   It also carries the store's top inset (see .td-mmo-store). */
.td-mmo-store-head { align-items: center; padding: 12px 0 6px; }

/* Thin glowing scrollbar so the armory reads like a console viewport.
   min-height keeps an internal scroll area alive on short windows so the
   freeze-pane below still has somewhere to pin. */
.td-mmo-store {
  min-height: 200px;
  scrollbar-width: thin;
  scrollbar-color: rgba(103,232,249,0.3) transparent;
}
.td-mmo-store::-webkit-scrollbar { width: 7px; }
.td-mmo-store::-webkit-scrollbar-track { background: transparent; }
.td-mmo-store::-webkit-scrollbar-thumb { background: rgba(103,232,249,0.22); border-radius: 999px; }
.td-mmo-store::-webkit-scrollbar-thumb:hover { background: rgba(103,232,249,0.42); }

/* ── Armory freeze-pane: the section title + Loop selector stay pinned
   to the top of the scrolling store, so the loop can be switched without
   scrolling back up. Negative margins span the store's gutters so cards
   slide cleanly underneath. ── */
.td-mmo-armory-bar {
  position: sticky;
  top: -1px;
  z-index: 7;
  align-items: center;
  margin: 0 -12px;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgba(12,20,34,0.99), rgba(10,16,28,0.94));
  border-bottom: 1px solid rgba(103,232,249,0.22);
  box-shadow: 0 12px 18px -14px rgba(0,0,0,0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Mk-tier accents — the active loop pill wears its tier's color. */
.td-mmo-loop-btn.active[data-loop="2"] {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 0 8px rgba(251,191,36,0.38);
}
.td-mmo-loop-btn.active[data-loop="3"] {
  background: linear-gradient(135deg, #c084fc, #7c3aed);
  color: #f5f3ff;
  box-shadow: 0 0 8px rgba(168,85,247,0.45);
}

/* ── Loadout dock — owned weapons/consumables as compact single-line rows
   with inline EQUIP / USE, replacing the old stacked cards. Weapons and
   consumables are separate groups, each with its own collapse toggle. ── */
.td-gear { display: flex; flex-direction: column; gap: 7px; }
.td-gear-group { display: flex; flex-direction: column; gap: 5px; }
.td-gear-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  border: none; background: transparent; padding: 1px 2px; cursor: pointer;
  color: #5a7090; font: 800 0.58rem/1 'JetBrains Mono',monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: color .15s;
}
.td-gear-head:hover { color: #9fb4d0; }
.td-gear-head-chevron { font-size: 0.5rem; transition: transform .15s ease; }
.td-gear-group.collapsed .td-gear-head-chevron { transform: rotate(-90deg); }
.td-gear-head-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(90,112,144,0.35), transparent); }
.td-gear-head-sum {
  color: #7d93b2; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-gear-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
.td-gear-item {
  --g: #67e8f9;
  display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 26px;
  padding: 3px 5px 3px 7px; border-radius: 7px;
  border: 1px solid rgba(148,163,184,0.20);
  background: rgba(15,23,42,0.66);
  transition: border-color .14s, box-shadow .14s;
}
.td-gear-item:hover { border-color: rgba(148,163,184,0.45); }
.td-gear-item.is-on {
  border-color: var(--g);
  box-shadow: inset 0 0 12px -8px var(--g), 0 0 10px -6px var(--g);
}
.td-gear-dot {
  flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--g); box-shadow: 0 0 5px var(--g);
}
.td-gear-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #aebed6; font: 800 0.6rem/1.15 'JetBrains Mono',monospace; letter-spacing: 0.03em;
}
.td-gear-item.is-on .td-gear-name { color: var(--g); }
.td-gear-ammo {
  flex-shrink: 0; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #5a7090; font: 700 0.54rem/1 'JetBrains Mono',monospace;
}
.td-gear-ammo.low { color: #f5a623; }
.td-gear-qty { flex-shrink: 0; color: #fde68a; font: 800 0.56rem/1 'JetBrains Mono',monospace; }
.td-gear-btn {
  flex-shrink: 0; border: 1px solid rgba(148,163,184,0.32); border-radius: 6px;
  background: rgba(2,6,23,0.5); color: #cbd5e1; cursor: pointer;
  font: 800 0.62rem/1 'JetBrains Mono',monospace; letter-spacing: 0.06em;
  padding: 6px 10px;
  transition: border-color .12s, color .12s, background .12s, transform .1s;
}
.td-gear-btn:hover { border-color: var(--g); color: var(--g); background: rgba(2,6,23,0.85); }
.td-gear-btn:active { transform: scale(0.94); }
.td-gear-check {
  flex-shrink: 0; color: var(--g); font-size: 0.62rem; font-weight: 900; padding: 0 3px;
  text-shadow: 0 0 6px var(--g);
}
@media (pointer: coarse) {
  .td-gear-item { min-height: 34px; }
  .td-gear-btn { padding: 8px 11px; }
}