#duel-view { display: flex; flex-direction: column; gap: 24px; }
#duel-view[hidden] { display: none; }
#duel-content { display: flex; flex-direction: column; gap: 24px; }
.duel-panel, .duel-scores { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.duel-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
details.duel-panel { display: block; }
.duel-panel summary { cursor: pointer; font: 500 17px/1.3 var(--font-ui); }
.duel-panel[open] > :not(summary) { margin-top: 16px; }
.duel-copy { max-width: 48ch; text-wrap: pretty; font: 400 16px/1.65 var(--font-ui); color: var(--text-secondary); margin: 0; }
.duel-panel h2 { font: 400 24px/1.2 var(--font-display); margin: 0; }
.duel-scores, .duel-board { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; width: 100%; }
.duel-scores > div { display: flex; flex-direction: column; gap: 8px; font: 400 15px/1.5 var(--font-ui); }
.duel-scores strong { font: 500 17px/1.3 var(--font-ui); }
.duel-card-row { display: flex; gap: 16px; overflow-x: auto; width: 100%; padding: 4px 4px 16px; align-items: stretch; scroll-snap-type: x proximity; }
.duel-reward-slot { display: flex; flex-direction: column; flex: 0 0 224px; min-width: 0; gap: 12px; scroll-snap-align: start; }
.duel-reward-slot > .duel-card { flex: 1 0 auto; width: 100%; }
.duel-reward-slot > .secondary-button { white-space: normal; }
.duel-card { display: flex; flex-direction: column; flex: 0 0 224px; gap: 12px; padding: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-tile); background: var(--surface-sunken); color: var(--text); text-align: left; min-width: 0; scroll-snap-align: start; }
button.duel-card { cursor: pointer; transition: transform 160ms cubic-bezier(.2,0,0,1); }
button.duel-card:hover { transform: translateY(-4px); background: var(--surface-raised); }
.duel-art { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius-input); }
.duel-card-title, .duel-side h3 { font: 500 17px/1.3 var(--font-ui); margin: 0; overflow-wrap: anywhere; }
.duel-card-copy { font: 400 15px/1.5 var(--font-ui); color: var(--text-secondary); text-wrap: pretty; }
.duel-meta { font: 400 13px/1.4 var(--font-ui); color: var(--text-muted); margin: 0; }
.duel-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.duel-unit { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.duel-unit > .duel-card { flex-basis: auto; }
.duel-unit .duel-art { max-height: 160px; }
.duel-modifier summary { font: 400 15px/1.5 var(--font-ui); color: var(--text-secondary); }
.duel-empty { color: var(--accent-quiet); font: 400 15px/1.5 var(--font-ui); padding: 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-tile); text-align: center; }
.duel-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.duel-field { display: flex; flex-direction: column; gap: 8px; font: 400 15px/1.5 var(--font-ui); width: 100%; }
.duel-field select { width: 100%; min-width: 0; font-family: var(--font-ui); }
.duel-error { color: var(--attention-red); font: 500 15px/1.5 var(--font-ui); }
#duel-message:empty { display: none; }
#duel-dialog { width: min(100% - 32px, 480px); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface); color: var(--text); overflow-y: auto; }
#duel-dialog::backdrop { background: var(--bg); opacity: .9; }
#duel-dialog:not([open]) { display: none; }
.duel-choice { display: flex; flex-direction: column; gap: 16px; }
.duel-choice > .duel-card { flex-basis: auto; }
.duel-choice .duel-art { max-height: 180px; }
.duel-choice h2 { font: 400 24px/1.2 var(--font-display); margin: 0; }
.duel-payments { border: 1px solid var(--border); border-radius: var(--radius-input); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.duel-payments label { display: flex; align-items: center; gap: 12px; font: 400 15px/1.5 var(--font-ui); }
.duel-payments input { width: auto; }
.duel-log { font: 400 15px/1.5 var(--font-ui); color: var(--text-secondary); padding-left: 24px; }
#duel-view :focus-visible, #duel-dialog :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 600px) { .duel-panel, .duel-scores { padding: 20px; } .duel-board { grid-template-columns: 1fr; } .duel-card, .duel-reward-slot { flex-basis: 200px; } .duel-scores { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { button.duel-card { transition: none; } button.duel-card:hover { transform: none; } }


/* Turindikator */
.duel-turn-notice {
  position: fixed;
  z-index: 120;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  max-width: min(420px, calc(100vw - 32px));
  padding: 16px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text);
  font: 500 15px/1.5 var(--font-ui);
}
@media (max-width: 640px) {
  .duel-turn-notice { left: 16px; right: 16px; text-align: center; }
}