/* Additions for the API-connected site. Colours, fonts and layout tokens come from styles.css / themes.css. */
[hidden] { display: none !important; }
.round-number > b { font-weight: inherit; }

/* Connection state: the dot stops looking "live" whenever the data on screen is not. */
body[data-conn="connecting"] .live-label .status-dot,
body[data-conn="reconnecting"] .live-label .status-dot,
body[data-conn="connecting"] .market-status .status-dot,
body[data-conn="reconnecting"] .market-status .status-dot,
body[data-conn="connecting"] .comments-heading .status-dot,
body[data-conn="reconnecting"] .comments-heading .status-dot { background: var(--dim); animation: none; box-shadow: none; }
body[data-conn="reconnecting"] .live-label { color: var(--sell); }
body[data-conn="reconnecting"] .arena-svg,
body[data-conn="reconnecting"] #market-chart { opacity: .55; }
.arena-svg, #market-chart { transition: opacity .2s; }

/* Mode switch (competition / practice) */
.mode-switch { display: flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 6px; }
.mode-switch button { min-height: 26px; padding: 2px 11px; border-radius: 4px; font-size: 10px; color: var(--muted); white-space: nowrap; transition: background-color .15s, color .15s; }
.mode-switch button:hover { color: var(--ink); }
.mode-switch button.selected { background: var(--accent-soft); color: var(--yellow); }
.mode-switch button:focus-visible { outline-offset: 2px; }

.practice-banner { margin: 0 20px 10px; padding: 7px 12px; border: 1px dashed var(--line); border-radius: 6px; background: var(--accent-soft); color: var(--muted); font-size: 10px; line-height: 1.9; text-align: center; text-wrap: balance; }
.practice-banner b { color: var(--yellow); font-weight: 600; margin-inline-end: 6px; }
body[data-app-mode="practice"] .market-status,
body[data-app-mode="practice"] .feed-state { color: var(--yellow); }

/* Round content link and composer */
.round-link { color: var(--yellow); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.round-link:hover { text-decoration-color: currentColor; }
.comment-composer > p.composer-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.comment-composer > p.composer-link { min-height: 18px; text-align: center; }
.feed-empty { padding: 56px 8px; text-align: center; color: var(--muted); font-size: 11px; line-height: 2; text-wrap: balance; }
.comment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-meta { gap: 8px; }
.leader-name { white-space: nowrap; flex: 1; }
.current-price, .countdown, .leader-result, .execution-price, .market-metrics strong { font-variant-numeric: tabular-nums; }
.stage-actions button:disabled { cursor: not-allowed; }

@media (max-width: 520px) {
  .mode-switch button { padding: 2px 8px; font-size: 9px; }
  .practice-banner { margin: 0 12px 8px; font-size: 9px; }
}
@media (max-width: 380px) {
  .header-game-label { display: none; }
}

/* Feed: rejected commands are listed with their reason; they never become a candle or a figure. */
.comment-item.rejected .avatar, .comment-item.rejected .comment-name { opacity: .6; }
.comment-item.rejected .comment-message strong { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.reject-reason { font: 9px/1.7 var(--font); color: var(--muted); text-align: right; min-width: 0; }
.reject-mark { color: var(--sell); }

/* Leaderboard: every loaded page, scrollable inside the panel. */
#leaderboard-list { max-height: 262px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#leaderboard-list:focus-visible, #comment-feed:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.leader-row { content-visibility: auto; contain-intrinsic-size: auto 46px; }
.leader-row.self .leader-name { color: var(--brand); }
.leader-pnl { font: 10px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leader-pnl.positive { color: var(--buy); }
.leader-pnl.negative { color: var(--sell); }
.leaderboard-more { margin: 10px auto 14px; min-height: 30px; }
.rules-pending { font-size: 10px; color: var(--muted); margin: 0 0 12px; }

/* Signed-in panel («حرکت من») */
.personal-data { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
.personal-data > div:last-child { grid-column: auto; }
.personal-data dd { font-variant-numeric: tabular-nums; }
.personal-data dd.account-name { font-size: 13px; color: var(--brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.estimate-tag { font-size: 8px; padding: 0 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--yellow); margin-inline-start: 4px; }
.my-commands { border-top: 1px solid var(--line); padding: 14px 23px 16px; }
.my-commands h3 { font-size: 12px; font-weight: 600; margin: 0 0 8px; }
.my-commands-list { list-style: none; margin: 0; padding: 0; max-height: 212px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.my-commands-list:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.my-command { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 10px; }
.my-command:last-child { border-bottom: 0; }
.my-command strong { font: 600 11px var(--mono); direction: ltr; text-align: right; color: var(--buy); }
.my-command strong.sell { color: var(--sell); }
.my-command strong.close { color: var(--yellow); }
.my-command strong.none { font: 10px var(--font); color: var(--dim); }
.my-command.rejected strong { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.my-command.rejected strong.none { text-decoration: none; }
.my-outcome { color: var(--ink); min-width: 0; line-height: 1.8; }
.my-command.rejected .my-outcome, .my-command.pending .my-outcome { color: var(--muted); }
.my-outcome b { font: 600 10px var(--mono); margin-inline-start: 6px; display: inline-block; }
[data-logout] { white-space: nowrap; flex-shrink: 0; }
.my-outcome b.positive { color: var(--buy); }
.my-outcome b.negative { color: var(--sell); }
.my-meta { grid-column: 2; color: var(--dim); font-size: 9px; }
.my-card { grid-column: 3; grid-row: 1 / span 2; padding: 5px 9px; font-size: 10px; min-height: 30px; white-space: nowrap; }
.my-commands-empty { color: var(--muted); font-size: 10px; margin: 6px 0 0; }
.my-more { margin: 10px auto 0; min-height: 30px; }
.my-trade.settled .my-outcome { color: var(--yellow); }
.connect-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.connect-actions .outline-button { min-height: 34px; }
.empty-position button[data-open="connect"] { font-weight: 600; }
@media (max-width: 520px) {
  .personal-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-commands { padding: 12px 16px 14px; }
  .my-command { grid-template-columns: 62px minmax(0, 1fr) auto; column-gap: 8px; }
  .my-card, .my-more { min-height: 38px; }
}

/* Commenter names link to their Instagram profile in the competition. */
.profile-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.profile-link:hover { color: var(--brand); border-bottom-color: currentColor; }
.profile-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 2px; }
a.comment-name { font: 600 12px var(--mono); display: inline-block; max-width: 100%; }
.comment-item.rejected a.comment-name { color: var(--muted); }
a.leader-name { color: var(--ink); }
.leader-row.self a.leader-name { color: var(--brand); }

/* round: null */
.no-round { margin: 4px 20px 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--accent-soft); }
.no-round-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px; text-wrap: balance; }
.no-round-text { font-size: 11px; line-height: 2.1; color: var(--muted); margin: 0; text-wrap: pretty; }
.no-round-text b { font: 600 11px var(--mono); color: var(--yellow); }
.no-round-text a, .no-round-handle { color: var(--brand); font-family: var(--mono); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.no-round-text a:hover { text-decoration-color: currentColor; }
.chart-wrap { position: relative; }
.chart-empty { direction: rtl; position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; background: var(--panel); }
.chart-empty .no-round-text { max-width: 380px; }
.chart-empty .outline-button { margin-top: 10px; min-height: 36px; }
body.no-active-round .chart-watermark { display: none; }

/* SSE reconnect indicator */
.conn-indicator { position: fixed; z-index: 25; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 6px 13px; border: 1px solid var(--sell); border-radius: 20px; background: var(--panel); color: var(--ink); font-size: 11px; box-shadow: 0 6px 24px var(--shadow-color); white-space: nowrap; }
.conn-spinner { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--sell); animation: conn-spin .9s linear infinite; }
@keyframes conn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .conn-spinner { animation: none; border-color: var(--sell); } }
@media (max-width: 520px) {
  .no-round { margin: 2px 12px 10px; padding: 12px 13px; }
  .no-round-title { font-size: 13px; }
  .no-round-text { font-size: 10px; }
  .conn-indicator { font-size: 10px; white-space: normal; }
}