/* Arena-only additions on top of uo-design.css (shared tokens) and portal.css (hub layout). */

/* The arena's own navigation is the shared `.uo-subnav` row (uo-design.css), written in each
   page under the global bar; nothing arena-specific to style here. */

.hero .actions { margin-top: var(--uo-space-3); }
.status { display: flex; align-items: center; gap: var(--uo-space-1); font-size: .95rem; color: var(--uo-ink-dim); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--uo-line-strong); flex: none; }
.dot[data-state="up"] { background: var(--uo-ok); }
.dot[data-state="down"] { background: var(--uo-danger); }

.step-title { margin-top: var(--uo-space-4); }
.checklist { margin: 0 0 var(--uo-space-2); padding-left: 1.2em; }
.checklist li { margin-bottom: var(--uo-space-1); }
ol.plain { padding-left: 1.2em; }
ol.plain li { margin-bottom: var(--uo-space-1); }
.facts { margin-top: var(--uo-space-4); }
.two-col > .card { align-self: start; }
/* Grid items default to min-width:auto, so a column grows to the widest unbreakable line in it
   (the [Challenge command's pre) and the page gets 8px wider than a phone. Let them shrink;
   the pre scrolls sideways on its own. */
.two-col > *, .three-col > * { min-width: 0; }

.copy { display: flex; flex-direction: column; margin: var(--uo-space-2) 0 var(--uo-space-3); }
.copy pre { order: 2; margin: 0; padding: var(--uo-space-2); background: var(--uo-panel);
  border: 1px solid var(--uo-line); border-radius: var(--uo-radius-sm); overflow-x: auto; }
.copy code { font-size: .88rem; line-height: 1.6; overflow-wrap: normal; white-space: pre; color: var(--uo-ink); }
/* Its own row above the code, so it never covers a long line on a narrow screen. */
.copy button { order: 1; align-self: flex-end; margin-bottom: var(--uo-space-1); min-height: 32px; padding: 0 var(--uo-space-2);
  font: 600 .8rem var(--uo-font-body); color: var(--uo-gold-bright); background: var(--uo-bg); border: 1px solid var(--uo-gold-bright);
  border-radius: var(--uo-radius-sm); cursor: pointer; }
.copy button:hover { background: var(--uo-bg-elev); }
.ph { color: var(--uo-gold-bright); font-style: italic; }

.feed .m code { font-size: .8rem; }

.downloads { display: flex; flex-wrap: wrap; gap: var(--uo-space-1) var(--uo-space-3); list-style: none; padding: 0; margin: 0 0 var(--uo-space-2); }
.downloads a { font-weight: 600; }
details.build { border-top: 0; padding-block: 0 var(--uo-space-2); }
details.build summary { min-height: auto; font-weight: 500; color: var(--uo-ink-dim); }

.replay-card { display:flex; gap:20px; align-items:center; padding-block:16px; }
.replay-thumbnail { display:flex; align-items:center; justify-content:center; width:240px; flex-shrink:0; aspect-ratio:16/9; background:var(--uo-panel); border:1px solid var(--uo-line); border-radius:var(--uo-radius-sm); overflow:hidden; color:var(--uo-gold-bright); text-align:center; }
.replay-thumbnail img { width:100%; height:100%; object-fit:cover; }
.replay-thumbnail:hover { outline:2px solid var(--uo-gold-bright); }
@media(max-width:640px){.replay-card{flex-direction:column;align-items:stretch}.replay-thumbnail{width:100%}}

/* Bridge protocol table: scrolls sideways on a phone instead of widening the page. */
.table-wrap { overflow-x: auto; margin: 0 0 var(--uo-space-3); }
table.spec { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.spec th, table.spec td { text-align: left; vertical-align: top; padding: var(--uo-space-1) var(--uo-space-2); border-bottom: 1px solid var(--uo-line-soft); }
table.spec th { font-family: var(--uo-font-display); font-weight: 600; color: var(--uo-ink-dim); }
table.spec code { overflow-wrap: normal; white-space: nowrap; }
#bridge h3 { margin-top: var(--uo-space-3); }
/* On a phone each command becomes a small card: what you send, what it does, what comes back. */
@media (max-width: 600px) {
  table.spec thead { display: none; }
  table.spec tr { display: block; padding: var(--uo-space-1) 0; border-bottom: 1px solid var(--uo-line-soft); }
  table.spec td { display: block; border: 0; padding: 2px 0; }
  table.spec td:last-child::before { content: "→ "; color: var(--uo-ink-dim); }
  table.spec code { white-space: normal; overflow-wrap: anywhere; }
}

/* English / 한국어 switch for the bridge guide. Without JavaScript both languages simply show. */
.lang-switch { display: flex; gap: var(--uo-space-1); margin: var(--uo-space-2) 0; }
.lang-switch button { min-height: 32px; padding: 0 var(--uo-space-2); font: 600 .85rem var(--uo-font-body); cursor: pointer;
  color: var(--uo-gold-bright); background: transparent; border: 1px solid var(--uo-gold-bright); border-radius: var(--uo-radius-sm); }
.lang-switch button[aria-pressed="true"] { color: var(--uo-bg); background: var(--uo-gold-bright); }
.summary-ko { color: var(--uo-ink-dim); font-weight: 500; }
[lang="ko"] { word-break: keep-all; }

.activity-list{list-style:none;padding:0;display:grid;gap:16px}.activity-list .t{font-weight:650;margin:0 0 5px}.activity-list .m{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;color:var(--uo-ink-dim)}.activity-list li{border-bottom:1px solid var(--uo-line-soft);padding:12px 0}#activity details{margin-top:24px}#activity summary{cursor:pointer}

/* Landing: one card per page of the arena. */
.page-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .page-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .page-cards { grid-template-columns: 1fr; } }

/* Duels: the ring right now and the shard's recent duels (ported from the forum's Duel Ring). */
.live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uo-space-3); }
@media (max-width: 700px) { .live-grid { grid-template-columns: 1fr; } }
.live-card { border-color: var(--uo-gold); display: grid; gap: var(--uo-space-2); }
.live-head, .live-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--uo-space-2); flex-wrap: wrap;
  font-size: .85rem; color: var(--uo-ink-dim); }
.live-head .phase { display: inline-flex; align-items: center; gap: 6px; }
.dot.fighting { background: var(--uo-danger); width: 8px; height: 8px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot.fighting { animation: none; } }
.score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--uo-space-2); }
.score .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--uo-ink); }
.score .a { text-align: right; }
.score .name.won { color: var(--uo-gold-bright); font-weight: 600; }
.score .name.lost { color: var(--uo-ink-dim); }
.score .nums { font-family: var(--uo-font-display); font-size: 1.5rem; color: var(--uo-parch); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pips { display: inline-flex; gap: 4px; align-items: center; }
.pip { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--uo-line-strong); }
.pip.won { background: var(--uo-gold); border-color: var(--uo-gold); }
.pip.lost { background: var(--uo-ink-dim); border-color: var(--uo-ink-dim); }
.pip.draw { background: var(--uo-line-strong); }
.rules-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag { font-family: var(--uo-font-mono); font-size: .7rem; border: 1px solid var(--uo-line); border-radius: 4px; padding: 0 5px; color: var(--uo-ink-dim); }
.duel-list .item.duel { display: grid; gap: var(--uo-space-1); }
.duel-list .m { align-items: center; }

/* Rules: one card per special move, facts as a two-column list. */
.rules-grid { gap: var(--uo-space-3); }
.rule .facts { display: grid; grid-template-columns: auto 1fr; gap: var(--uo-space-1) var(--uo-space-2); margin: 0; font-size: 1rem; }
.rule .facts dt { color: var(--uo-ink-dim); white-space: nowrap; }
.rule .facts dd { margin: 0; color: var(--uo-ink); }
@media (max-width: 520px) { .rule .facts { grid-template-columns: 1fr; gap: 2px var(--uo-space-2); } .rule .facts dd { margin-bottom: var(--uo-space-1); } }