body[data-route="duel"], body[data-route="duel-board"] {
  background: radial-gradient(ellipse at 75% 55%, #0b303b80, transparent 70%),
    repeating-linear-gradient(90deg, #6ceff60c 0 1px, transparent 1px 48px), #020506;
}
.route-duel { --duel-accent: #35d9e5; }
body[data-viewport][data-route="duel"] .screen { height: 100%; max-height: 100%; margin-top: 0; }
body[data-viewport][data-route="duel-board"] .screen { height: 100%; max-height: 100%; margin-top: 0; }
.duel-screen { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.duel-screen .section-title { margin: 0; padding-bottom: 8px; }
.duel-intro { margin: 0; color: #bfd2d5; font-size: 17px; line-height: 1.5; }
.duel-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: auto; }
.duel-column { min-width: 0; overflow: auto; padding: 14px; border: 1px solid #3d5860; border-radius: 5px; background: linear-gradient(145deg, #1b3037eb, #081317ed); }
.duel-squad h3 { margin: 0 0 5px; color: var(--duel-accent); font-size: 21px; }
.duel-commander { margin: 0 0 8px; font-size: 19px; overflow-wrap: anywhere; }
.duel-empty, .duel-empty-slot { color: #9fb2b6; line-height: 1.5; font-size: 17px; }
.duel-empty-slot { padding: 12px; }
.duel-member { border: 1px solid #38545d; border-radius: 4px; margin-bottom: 7px; background: #0713198c; }
.duel-member summary { display: flex; align-items: center; gap: 10px; padding: 5px 10px; cursor: pointer; }
.duel-member summary:focus-visible { outline: 2px solid var(--duel-accent); }
.duel-portrait { display: block; width: 62px; height: 62px; flex: 0 0 62px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.duel-member-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.duel-member-label strong { font-size: 20px; }
.duel-member-label small { font-size: 15px; color: #b5c8cd; }
.duel-expand { margin-left: auto; color: var(--duel-accent); font-size: 15px; }
.duel-member[open] .duel-expand { color: #e2c266; }
.duel-member-info { padding: 5px 14px 12px; font-size: 16px; line-height: 1.6; border-top: 1px solid #38545d; }
.duel-member-info p { white-space: pre-line; }
.duel-tactics { padding-left: 28px; margin: 5px 0; }
.duel-tactics li { padding-left: 4px; }
.duel-code-label { display: block; font-size: 17px; color: #c9dbde; margin: 8px 0; }
.duel-code { display: block; box-sizing: border-box; width: 100%; height: 80px; margin-top: 7px; resize: vertical; padding: 9px; font: 16px/1.4 monospace; color: #dcf7f5; background: #050d11; border: 1px solid #506c76; border-radius: 4px; overflow-wrap: anywhere; }
.duel-code:focus { outline: 2px solid var(--duel-accent); }
.duel-share-output, .duel-code-input { height: 46px; resize: none; }
.duel-id-output { font-size: 25px; letter-spacing: .09em; color: var(--duel-accent); }
.duel-share-note { color: #a9bfc5; font-size: 15px; line-height: 1.5; margin: 10px 0; }
.duel-registration-meta { color: #d7d596; font-size: 16px; line-height: 1.5; margin: 10px 0; overflow-wrap: anywhere; }
.duel-id-details { margin: 10px 0; color: #adc8ce; }
.duel-id-details summary { cursor: pointer; font-size: 16px; }
.duel-screen .duel-remove { color: #ebbdad; border-color: #805c50; }
.duel-board-screen { display: flex; flex-direction: column; min-height: 0; gap: 12px; }
.duel-board-screen .section-title { margin: 0; }
.duel-board-search { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.duel-board-search label { display: flex; flex-direction: column; gap: 5px; font-size: 16px; color: #bfd6dc; }
.duel-board-search label:first-child { flex: 1; min-width: 200px; }
.duel-board-search input, .duel-board-search select { min-height: 43px; padding: 8px 12px; background: #08171d; border: 1px solid #47717c; border-radius: 4px; color: #e3f4f6; font-size: 18px; }
.duel-board-screen button { min-height: 43px; padding: 8px 16px; font-size: 18px; }
.duel-board-notice { margin: 0; min-height: 24px; font-size: 17px; color: #b5d6da; }
.duel-board-list { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-content: start; padding: 2px 5px 5px 0; }
.duel-board-card { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 12px 16px; border: 1px solid #3b6370; border-radius: 5px; background: linear-gradient(120deg,#162d36,#08151a); }
.duel-board-card h3 { margin: 0; color: #e2f6f8; font-size: 22px; overflow-wrap: anywhere; }
.duel-board-card small { grid-column: 1; color: #a5bdc5; font-size: 14px; }
.duel-board-members { grid-column: 1/-1; display: flex; gap: 16px; flex-wrap: wrap; }
.duel-board-member { display: flex; align-items: center; gap: 5px; font-size: 16px; }
.duel-board-card .duel-portrait { width: 54px; height: 54px; flex-basis: 54px; }
.duel-board-card .duel-board-challenge { grid-column: 2; grid-row: 1/span 2; align-self: center; color: #c7ffff; border-color: #35bfcf; background: #124653; }
body[data-viewport="mobile-portrait"] .duel-board-list { grid-template-columns: 1fr; }
.duel-screen button { min-height: 40px; padding: 7px 14px; font-size: 17px; }
.duel-actions { flex-wrap: wrap; gap: 8px; margin: 9px 0; }
.duel-footer { display: flex; align-items: center; gap: 16px; border-top: 1px solid #38545d; padding-top: 10px; }
.duel-notice { margin: 0; flex: 1; color: #bed6d9; font-size: 16px; line-height: 1.5; }
.duel-screen .duel-start { flex: 0 0 auto; min-width: 190px; min-height: 50px; border-color: var(--duel-accent); color: #e0ffff; background: #14505b; font-size: 20px; }
.duel-screen button:disabled { opacity: .4; cursor: not-allowed; }
.duel-result .battle-result-banner { color: #d5f7fa; }
.home-duel-action { min-width: 120px; min-height: 42px; border-color: #2c9dab; background: #102a32ed; font-size: 19px; }
body[data-viewport="mobile-portrait"] .duel-grid { grid-template-columns: 1fr; }
body[data-viewport="mobile-portrait"] .duel-column { overflow: visible; }
body[data-viewport="mobile-portrait"] .duel-footer { flex-wrap: wrap; }

/* Keep playing and publishing as separate, short flows. */
.duel-tabs { display: flex; gap: 8px; border-bottom: 1px solid #38545d; padding-bottom: 10px; }
.duel-screen .duel-tab { min-width: 190px; border-color: transparent; background: #102129; color: #a9c2c9; font-size: 20px; }
.duel-screen .duel-tab.is-active { color: #d9ffff; background: #184954; border-color: #47d4df; box-shadow: inset 0 -3px #47d4df; }
.duel-tab-panel { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.duel-tab-panel[hidden] { display: none; }
.duel-steps { margin: 0; color: #b9d6dc; font-size: 17px; line-height: 1.4; }
.duel-fight-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; position: relative; z-index: 5; flex-shrink: 0; }
.duel-screen .duel-primary { color: #06232a; background: #50dce3; border-color: #8df2f5; font-weight: 800; }
.duel-screen .duel-primary:hover { background: #8aedef; }
.duel-screen .duel-primary:not(:disabled) { --button-surface: linear-gradient(180deg,#6de6e9,#38bfc9); --button-text: #072c34; --button-edge: #98f5f5; }
.duel-screen .duel-primary:not(:disabled):hover { --button-surface: linear-gradient(180deg,#9af4f4,#65dce1); }
.duel-screen .duel-tab.is-active { --button-surface: linear-gradient(180deg,#1e5660,#163940); --button-edge: #55d9e3; --button-text: #e1ffff; }
.duel-screen .duel-find-opponent { display: flex; flex-direction: column; gap: 5px; width: 100%; min-height: 66px; font-size: 24px; }
.duel-find-opponent small { color: #173d43; font-weight: 400; font-size: 15px; }
.duel-find-opponent:not(.duel-primary) small { color: #b3c8cf; }
.duel-invitation { position: relative; border: 1px solid #39565f; border-radius: 5px; background: #0c1b22; }
.duel-invitation > summary { padding: 18px; color: #c6dcdf; font-size: 19px; cursor: pointer; min-height: 64px; box-sizing: border-box; }
.duel-invitation-controls { position: absolute; top: 100%; left: -1px; right: -1px; padding: 12px 15px 14px; display: flex; gap: 8px; flex-wrap: wrap; background: #0c1b22; border: 1px solid #527682; border-radius: 0 0 5px 5px; box-shadow: 0 12px 24px #000a; }
.duel-invitation-controls label { flex: 1 0 100%; margin: 0; }
.duel-invitation-controls .duel-code { margin-top: 5px; }
.duel-match-grid { grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr); gap: 12px; }
.duel-versus { align-self: center; text-align: center; color: #8ab3bf; font-size: 23px; font-weight: 800; }
.duel-match-grid .duel-portrait { width: 44px; height: 44px; flex-basis: 44px; }
.duel-match-grid .duel-member summary { padding: 4px 9px; gap: 9px; }
.duel-match-grid .duel-member { margin-bottom: 6px; }
.duel-match-grid .duel-member-label { gap: 2px; }
.duel-match-grid .duel-member-label strong { font-size: 19px; }
.duel-match-grid .duel-member-label small { font-size: 14px; }
.duel-match-grid .duel-commander { font-size: 17px; }
.duel-match-grid > .duel-column:first-child { position: relative; }
.duel-match-grid .duel-squad h3 { padding-right: 140px; }
.duel-screen .duel-match-grid .duel-edit-team { position: absolute; top: 10px; right: 14px; margin: 0; min-height: 34px; padding: 5px 10px; font-size: 15px; }
.duel-match-grid .duel-squad { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto auto minmax(0,1fr); gap: 8px; height: 100%; min-height: 0; }
.duel-match-grid .duel-squad > h3, .duel-match-grid .duel-commander { grid-column: 1/-1; margin-bottom: 0; direction: ltr; }
.duel-match-grid .duel-commander::after { content: "後方 → 前線"; float: right; color: #8daeb7; font-size: 14px; }
.duel-match-grid .duel-opponent-preview .duel-squad { direction: rtl; }
.duel-match-grid .duel-opponent-preview .duel-commander::after { content: "前線 ← 後方"; }
.duel-match-grid .duel-member, .duel-match-grid .duel-empty-slot { grid-column: var(--duel-slot); grid-row: 3; margin: 0; min-width: 0; min-height: 0; direction: ltr; border: 1px solid #38545d; border-radius: 4px; }
.duel-match-grid .duel-member > summary { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 10px 6px; text-align: center; box-sizing: border-box; min-height: 100%; }
.duel-match-grid .duel-member:not([open]) > summary { height: 100%; min-height: 0; gap: 6px; padding: 8px 6px; }
.duel-match-grid .duel-portrait { width: 100%; height: 100px; flex: 0 0 100px; }
.duel-match-grid .duel-member:not([open]) .duel-portrait { flex: 1 1 90px; height: 90px; min-height: 50px; max-height: 100px; }
.duel-match-grid .duel-opponent-preview .duel-portrait { transform: scaleX(-1); }
.duel-match-grid .duel-member-label { gap: 5px; }
.duel-match-grid .duel-member-label strong { font-size: 20px; overflow-wrap: anywhere; }
.duel-match-grid .duel-member-label small { font-size: 14px; line-height: 1.5; }
.duel-match-grid .duel-expand { margin: 0; font-size: 15px; }
.duel-match-grid .duel-empty-slot { display: grid; place-items: center; text-align: center; color: #879ea7; border-style: dashed; }
.duel-match-grid .duel-squad > .duel-empty { grid-column: 1/-1; grid-row: 2/4; direction: ltr; }
.duel-match-grid .duel-member[open] { grid-column: 1/-1; z-index: 2; overflow: auto; background: #0c1d25; }
.duel-match-grid .duel-member[open] > summary { flex-direction: row; justify-content: flex-start; min-height: auto; text-align: left; padding: 8px 10px; }
.duel-match-grid .duel-member[open] .duel-portrait { width: 44px; height: 44px; flex: 0 0 44px; }
.duel-match-grid .duel-member[open] .duel-expand { margin-left: auto; }
.duel-screen .duel-edit-team { margin-top: 8px; background: #142b33; font-size: 16px; }
.duel-opponent-preview .duel-empty { margin: 32px 0; padding: 25px; border: 1px dashed #385c68; text-align: center; }
.duel-sharing h3 { margin: 12px 0 8px; color: #d8f6f8; font-size: 24px; }
.duel-share-state { display: inline-block; color: #b7c8cb; background: #26363b; padding: 5px 10px; border-radius: 4px; font-size: 15px; }
.duel-share-state.is-published { color: #8ff5e9; background: #123e3e; }
.duel-share-explanation { margin: 0 0 10px; font-size: 18px; line-height: 1.5; color: #d0e0e4; }
.duel-sharing .duel-publish, .duel-sharing .duel-copy-invite { min-width: 220px; margin: 3px 0; min-height: 46px; font-size: 19px; }
.duel-invite-output-label { margin: 16px 0 7px; }
.duel-sharing .duel-url-output { font-size: 16px; }
.duel-management { border-top: 1px solid #38545d; margin-top: 14px; padding-top: 10px; }
.duel-management summary { color: #b4c9d0; font-size: 16px; cursor: pointer; }
.duel-management .duel-code-label { margin-top: 12px; }
.duel-management .duel-remove { display: block; margin-top: 16px; }
.duel-quick-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.duel-quick-invite { position: relative; }
.duel-quick-invite > summary { list-style: none; cursor: pointer; min-height: 40px; padding: 8px 14px; box-sizing: border-box; border: 1px solid #526c76; border-radius: 4px; background: #14272f; color: #e3f2f4; font-size: 17px; font-weight: 700; }
.duel-quick-invite > summary::-webkit-details-marker { display: none; }
.duel-quick-invite[open] > summary { border-color: #55d9e3; background: #20444b; }
.duel-quick-popover { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 8; width: 440px; max-width: calc(100vw - 40px); box-sizing: border-box; padding: 16px; background: #0c1b22; border: 1px solid #527682; border-radius: 5px; box-shadow: 0 -10px 28px #0009; }
.duel-quick-popover .duel-invite-output-label { margin-top: 0; }
.duel-quick-popover .duel-share-note { font-size: 14px; }
.duel-share-link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.duel-x-fallback { margin-top: 10px; color: #b5cbd2; font-size: 14px; }
.duel-x-fallback > summary { cursor: pointer; }
.duel-x-fallback .duel-x-draft { height: 110px; font-family: inherit; font-size: 16px; margin-bottom: 8px; }
.duel-x-share { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; box-sizing: border-box; padding: 8px 16px; border: 1px solid #76939f; border-radius: 4px; color: #fff; background: #060a0d; text-decoration: none; font-size: 17px; font-weight: 700; }
.duel-x-share:hover { background: #22323b; border-color: #9bd9e1; }
.duel-x-share:focus-visible, .duel-quick-invite > summary:focus-visible { outline: 2px solid #72dae0; outline-offset: 3px; }
.duel-quick-actions + .duel-notice { font-size: 15px; }
.duel-board-empty { grid-column: 1/-1; margin: 20px 0; padding: 28px; text-align: center; background: #0b1b23; border: 1px dashed #446772; border-radius: 6px; }
.duel-board-empty h3 { font-size: 23px; color: #d5eff3; }
.duel-board-empty p { color: #a9c2ca; font-size: 17px; }
body[data-viewport="mobile-portrait"] .duel-match-grid { grid-template-columns: 1fr; }
body[data-viewport="mobile-portrait"] .duel-fight-actions { grid-template-columns: 1fr; }
body[data-viewport="mobile-portrait"] .duel-versus { display: none; }