/* Shared screen, two seats. Native buttons support touch and keyboard without device permissions. */
#pDuel { align-items: safe center; }
.duel-shell { width: min(960px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; padding: clamp(16px, 3vw, 28px); background: #1c1745; border: 1px solid #5e4da1; border-radius: 18px; box-shadow: 0 24px 80px #08051b99; }
.duel-main, .duel-side { min-width: 0; display: grid; align-content: start; gap: 14px; }
.duel-main h2 { margin: 0; font-size: clamp(23px, 4vw, 34px); }
.duel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.duel-top .eyebrow { margin: 0; color: #73ead5; }
.duel-badge { font: 600 10px var(--font-mono); letter-spacing: .08em; border: 1px solid #554685; border-radius: 99px; padding: 6px 9px; color: var(--muted); white-space: nowrap; }
.duel-status { min-height: 24px; font-weight: 700; color: var(--signal); margin: 0; }
.duel-clock { color: #73ead5; font: 600 17px var(--font-mono); font-variant-numeric: tabular-nums; }
.duel-board { width: min(100%, 52vh, 520px); aspect-ratio: 1; margin: 0 auto; display: grid; gap: 4px; padding: 9px; background: #100d2d; border: 1px solid #51447a; border-radius: 14px; touch-action: manipulation; }
.duel-board.gravity { aspect-ratio: 7 / 6; grid-template-columns: repeat(7, 1fr); }
.duel-board.reversi { grid-template-columns: repeat(8, 1fr); background: #132d39; }
.duel-board.five { grid-template-columns: repeat(9, 1fr); gap: 2px; }
.duel-cell { display: grid; place-items: center; border: 1px solid #393057; border-radius: 4px; padding: 0; min-width: 0; min-height: 0; background: #252040; cursor: pointer; position: relative; }
.duel-cell:disabled { cursor: default; opacity: 1; }
.duel-cell:focus-visible, .duel-edge:focus-visible { outline: 3px solid white; z-index: 3; outline-offset: 2px; }
.duel-cell:not(:disabled):hover { background: #4a3d73; border-color: var(--signal); }
.duel-cell::before { content: ''; width: 76%; aspect-ratio: 1; border-radius: 50%; background: #100d2d; box-shadow: inset 0 3px 6px #0005; }
.duel-cell[data-piece="1"]::before { background: radial-gradient(circle at 33% 25%, #ffe8b2, #ffb83f 40%, #dc821c); box-shadow: 0 0 12px #ffb83f44; }
.duel-cell[data-piece="2"]::before { background: radial-gradient(circle at 33% 25%, #c8fff6, #73ead5 40%, #1e9f99); box-shadow: 0 0 12px #73ead544; }
.duel-cell[data-last="true"]::after { content: ''; width: 12%; aspect-ratio: 1; background: #1c1745; border: 1px solid white; border-radius: 50%; position: absolute; }
.duel-cell[data-legal="true"][data-piece="0"]::before { width: 18%; background: #7c719f; }
.duel-board.gravity .duel-cell { border-radius: 50%; background: #342454; }
.duel-board.five .duel-cell { background: linear-gradient(transparent 48%, #4a3b68 48%, #4a3b68 52%, transparent 52%), linear-gradient(90deg, transparent 48%, #4a3b68 48%, #4a3b68 52%, transparent 52%); border: 0; }
.duel-board.five .duel-cell[data-piece="0"]::before { background: transparent; box-shadow: none; }
.duel-board.boxes { gap: 0; padding: 14px; grid-template-columns: 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px; grid-template-rows: 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px; }
.duel-dot { border-radius: 50%; background: #eae6ff; width: 10px; height: 10px; align-self: center; justify-self: center; z-index: 2; }
.duel-edge { border: 0; padding: 0; background: #3b3059; position: relative; cursor: pointer; border-radius: 6px; }
.duel-edge::after { content: ''; position: absolute; inset: -7px; }
.duel-edge[data-piece="1"] { background: #ffb83f; }
.duel-edge[data-piece="2"] { background: #73ead5; }
.duel-edge:disabled { cursor: default; opacity: 1; }
.duel-edge:not(:disabled):hover { background: #82709f; }
.duel-box { display: grid; place-items: center; margin: 6px; color: var(--muted); font: 400 clamp(14px, 3vw, 23px) var(--font-display); border-radius: 8px; }
.duel-box[data-piece="1"] { background: #ffb83f33; color: #ffb83f; }
.duel-box[data-piece="2"] { background: #73ead533; color: #73ead5; }
.duel-seats { display: flex; gap: 8px; font: 600 12px var(--font-mono); }
.duel-seats span { padding: 10px; border: 1px solid #544772; border-radius: 8px; flex: 1; color: #ffb83f; }
.duel-seats span:last-child { color: #73ead5; }
.duel-seats [data-turn="true"] { background: #ffffff0a; border-color: currentColor; }
.duel-side h3 { font: 400 17px var(--font-display); margin: 0; }
.duel-side .btn { width: 100%; justify-content: center; }
.duel-actions { display: grid; gap: 9px; }
.duel-invite { display: grid; gap: 7px; }
.duel-invite input { width: 100%; min-width: 0; font-size: 12px; padding: 9px; }
.duel-terms { padding: 12px; background: #100d2d; border-radius: 10px; }
.duel-terms p { margin: 0; }
.duel-history { display: grid; gap: 7px; max-height: 180px; overflow-y: auto; }
.duel-history button { text-align: left; padding: 9px; background: #100d2d; color: var(--text); border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 12px; cursor: pointer; }
.duel-rules { font-size: 13px; color: var(--muted); line-height: 1.6; }
.duel-rules summary { color: var(--text); cursor: pointer; }
.match-receipt, .score-challenge { grid-column: 1 / -1; padding: 16px; background: var(--well); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; }
.match-receipt h3, .score-challenge h3 { font: 400 17px var(--font-display); margin: 0; }
.match-receipt p, .score-challenge p { margin: 0; }
.match-replay { max-height: 240px; overflow-y: auto; padding: 10px 10px 10px 28px; font: 12px/1.8 var(--font-mono); }
.challenge-history { width: min(960px, 100%); margin: 18px auto; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.challenge-history .duel-history { max-height: 240px; }
@media(max-width: 680px) {
 .duel-shell { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
 .duel-board { width: min(100%, 48vh, 440px); }
 .duel-side { gap: 11px; }
 .duel-actions { grid-template-columns: 1fr 1fr; }
 .duel-actions .btn { padding: 11px 7px; font-size: 13px; }
 .duel-top { gap: 7px; }
 .duel-badge { font-size: 9px; }
}