/* 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); }

/* Duels: the player on top (the arena's renderer in a 16:9 frame), then the recorded duels as a
   list whose first control is the Play button; the current duel is marked for eyes and readers. */
.hero-compact { padding-block: var(--uo-space-5); }
.hero-compact h1 { margin-bottom: var(--uo-space-2); }
.hero-compact .lead { margin-bottom: var(--uo-space-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.player-section { padding-block: var(--uo-space-4) var(--uo-space-6); }
.player { margin: 0 0 var(--uo-space-2); }
.player-frame { position: relative; aspect-ratio: 16 / 9; background: #05070a; border: 1px solid var(--uo-line-strong); border-radius: var(--uo-radius); overflow: hidden; }
/* The renderer's control panel needs room: on a phone the frame is taller than 16:9. */
@media (max-width: 640px) { .player-frame { aspect-ratio: auto; height: 70vh; min-height: 420px; } }
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--uo-space-3); text-align: center; color: var(--uo-ink-dim); }
.player-caption { padding-top: var(--uo-space-2); }
.player-caption p { margin: 0 0 4px; }
.player-caption__title { font-family: var(--uo-font-display); font-size: var(--uo-fs-h3); color: var(--uo-ink); }
.player-caption__links { display: flex; flex-wrap: wrap; gap: var(--uo-space-1) var(--uo-space-2); align-items: center; }
.filter { display: inline-flex; align-items: center; gap: var(--uo-space-1); font-size: .95rem; }
.filter select { font: inherit; padding: 6px 10px; background: var(--uo-panel); color: var(--uo-ink); border: 1px solid var(--uo-line-strong); border-radius: var(--uo-radius-sm); }
.duel-roll { list-style: none; margin: 0 0 var(--uo-space-3); padding: 0; }
.duel-roll__item { display: flex; gap: var(--uo-space-3); align-items: flex-start; padding: var(--uo-space-2) var(--uo-space-2); border-top: 1px solid var(--uo-line-soft); }
.duel-roll__item[aria-current="true"] { background: var(--uo-bg-elev); border-left: 3px solid var(--uo-gold); padding-left: calc(var(--uo-space-2) - 3px); }
.duel-roll__play { position: relative; flex: none; width: 160px; padding: 0; border: 1px solid var(--uo-line-strong); border-radius: var(--uo-radius-sm); background: var(--uo-panel); color: var(--uo-gold-bright); font: 600 .95rem var(--uo-font-body); cursor: pointer; overflow: hidden; }
.duel-roll__play:hover, .duel-roll__play:focus-visible { border-color: var(--uo-gold-bright); outline: 2px solid var(--uo-gold-bright); outline-offset: 2px; }
.duel-roll__play[aria-pressed="true"] { color: var(--uo-bg); background: var(--uo-gold-bright); }
.duel-roll__thumb { display: block; aspect-ratio: 16 / 9; background: #05070a; }
.duel-roll__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.duel-roll__label { display: block; padding: 6px 8px; }
.duel-roll__body { min-width: 0; flex: 1; }
.duel-roll__body .t { margin: 0 0 4px; color: var(--uo-ink); font-weight: 600; }
.duel-roll__body .m { display: flex; flex-wrap: wrap; gap: 4px var(--uo-space-2); font-size: .85rem; color: var(--uo-ink-dim); align-items: center; }
.replay-like { font: inherit; font-size: .85rem; padding: 2px 8px; background: transparent; color: var(--uo-gold-bright); border: 1px solid var(--uo-line-strong); border-radius: var(--uo-radius-sm); cursor: pointer; }
.replay-like[disabled] { opacity: .6; cursor: default; }
@media (max-width: 640px) { .duel-roll__item { flex-direction: column; } .duel-roll__play { 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); } }

/* Landing: two featured duels side by side, poster first, the viewer on demand. */
.featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uo-space-4); margin-bottom: var(--uo-space-2); }
@media (max-width: 800px) { .featured { grid-template-columns: 1fr; } }
.feature { margin: 0; display: flex; flex-direction: column; }
.feature figcaption { margin-top: var(--uo-space-2); }
.feature > .eyebrow { margin-bottom: var(--uo-space-1); }
.feature__title { margin: 0 0 4px; font-family: var(--uo-font-display); font-size: var(--uo-fs-h3); color: var(--uo-ink); }
.feature__meta { margin: 0; }
.feature__frame { aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .feature__frame { aspect-ratio: auto; height: 60vh; min-height: 380px; } }
.feature__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #05070a; cursor: pointer; display: grid; place-items: center; }
.feature__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.feature__icon { position: relative; width: 84px; height: 84px; border-radius: 50%; background: #000a; color: #fff; font: 36px/84px var(--uo-font-body); text-align: center; padding-left: 6px; box-shadow: 0 4px 30px #000a; transition: background .15s, color .15s; }
.feature__play:hover .feature__icon, .feature__play:focus-visible .feature__icon { background: var(--uo-gold-bright); color: var(--uo-bg); }
.feature__play:focus-visible { outline: 3px solid var(--uo-gold-bright); outline-offset: 2px; }
.feature__links { margin: var(--uo-space-1) 0 0; display: flex; gap: var(--uo-space-2); flex-wrap: wrap; }
.player-frame .feature__play + * { display: none; }