/* Two-player board game shell (engine-u22-two-player.js): mode switch, score strip, status line, actions.
   Player colors are the only literals: purple (player 1) and amber (player 2), far apart for color-blind players, with lighter dark-mode twins. */
.tool.duel { --p0: 167 60 255; --p1: 217 119 6; gap: 12px; -webkit-tap-highlight-color: transparent; scroll-margin-top: 96px; }
@media (prefers-color-scheme: dark) { .tool.duel { --p0: 196 140 255; --p1: 251 146 60; } }

.tool .duel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Segmented mode switch */
.tool .duel-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .06); }
.tool .duel-seg button {
  min-height: 44px; border-radius: 16px; font-size: 14px; line-height: 18px; font-weight: 800; color: rgb(var(--ink) / .6);
  padding: 0 6px; user-select: none; touch-action: manipulation;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.tool .duel-seg button[aria-checked="true"] { background: rgb(var(--ink)); color: var(--bg); }
.tool .duel-seg button:active { transform: scale(.96); }
.tool .duel-seg button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .tool .duel-seg button[aria-checked="false"]:hover { color: rgb(var(--ink)); } }

/* Options row: board + level chips, compact */
.tool .duel-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tool .duel-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool .duel-opt-l { font-size: 13px; font-weight: 800; color: rgb(var(--ink) / .5); }
.tool .duel-opts .tool-chips { gap: 6px; }
.tool .duel-opts .tool-chips button { min-height: 36px; padding: 0 12px; font-size: 13px; }

/* Score strip: player 1 left, player 2 right, the side to move lights up */
.tool .duel-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.tool .duel-player {
  position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 52px; padding: 6px 10px; border-radius: 18px;
  background: var(--surface); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .25s ease, transform .3s var(--ease-out);
}
.tool .duel-player.p1 { justify-content: flex-end; }
.tool .duel-player.p0.is-turn { box-shadow: inset 0 0 0 2px rgb(var(--p0)); }
.tool .duel-player.p1.is-turn { box-shadow: inset 0 0 0 2px rgb(var(--p1)); }
.tool .duel-player.is-win { animation: duel-win .6s var(--ease-out) both; }
@keyframes duel-win { 40% { transform: scale(1.05); } 100% { transform: none; } }
.tool .duel-token { flex: 0 0 auto; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 8px; font-size: 14px; font-weight: 950; color: var(--bg); }
.tool .p0 .duel-token { background: rgb(var(--p0)); }
.tool .p1 .duel-token { background: rgb(var(--p1)); }
.tool .duel-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: rgb(var(--ink) / .8); padding: 4px 2px; border-radius: 8px; text-align: left; }
.tool .duel-name:disabled { cursor: default; color: rgb(var(--ink) / .8); }
.tool .duel-name:not(:disabled) { text-decoration: underline dotted rgb(var(--ink) / .25); text-underline-offset: 4px; }
.tool .duel-name-in { width: 100%; min-width: 0; min-height: 36px !important; padding: 4px 8px !important; border-radius: 10px !important; font-size: 16px !important; }
.tool .duel-score-n { font-size: 22px; line-height: 28px; font-weight: 950; font-variant-numeric: tabular-nums; margin-left: auto; }
.tool .p1 .duel-score-n { margin: 0 auto 0 0; }
.tool .duel-draws { display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 14px; font-weight: 800; color: rgb(var(--ink) / .45); text-align: center; white-space: nowrap; }
.tool .duel-draws small { font-size: 10px; line-height: 12px; font-weight: 700; color: rgb(var(--ink) / .4); }
.tool .duel-you { display: none; position: absolute; top: -8px; left: 12px; padding: 1px 6px; border-radius: 6px; font-size: 10px; line-height: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; background: rgb(var(--ink)); color: var(--bg); }
.tool .duel-player.p1 .duel-you { left: auto; right: 12px; }
.tool .duel-player.is-me .duel-you { display: block; }
.tool .duel-ask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .7); }
.tool .duel-ask input { flex: 1 1 160px; max-width: 240px; min-height: 44px; }

/* Status line: fixed height so the board never moves */
.tool .duel-status {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 8px 14px; border-radius: 16px; font-size: 15px; line-height: 20px; font-weight: 800; color: rgb(var(--ink)); background: var(--surface);
  text-wrap: balance;
}
.tool .duel-status::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; align-self: center; background: rgb(var(--ink) / .2); }
.tool .duel-status.t0::before { background: rgb(var(--p0)); }
.tool .duel-status.t1::before { background: rgb(var(--p1)); }
.tool .duel-status.is-over { background: rgb(var(--ink)); color: var(--bg); }
.tool .duel-status.is-over::before { display: none; }
.tool .duel-status.is-wait::before { animation: duel-pulse 1.4s ease-in-out infinite; background: rgb(var(--accent)); }
@keyframes duel-pulse { 50% { opacity: .25; } }

/* Actions: one primary, small secondary icon buttons */
.tool .duel-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tool .duel-actions .btn { min-height: 48px; }
.tool .duel-primary { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tool .duel-icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 14px; }
.tool .duel-icon-btn .tool-icon { width: 18px; height: 18px; }
.tool .btn:active { transform: scale(.96); }
.tool .duel-note { text-align: center; }
.tool .duel-streak:empty, .tool .duel-games:empty { display: none; }
.tool .duel-games { display: grid; gap: 6px; }
.tool .duel-games-t { font-size: 13px; font-weight: 800; color: rgb(var(--ink) / .5); }
.tool a.duel-game { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 14px; background: var(--surface); text-decoration: none; color: rgb(var(--ink)); font-size: 15px; }
.tool a.duel-game small { font-size: 13px; font-weight: 700; color: var(--link); }

@media (max-width: 599px) {
  .tool .duel-actions { flex-direction: row; }
  .tool .duel-actions .btn { width: auto; }
  .tool .duel-actions .duel-primary { width: 100%; }
  .tool .duel-icon-btn { flex: 1 1 0; justify-content: center; padding: 0 8px; font-size: 13px; white-space: nowrap; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool .duel-player.is-win, .tool .duel-status.is-wait::before { animation: none; }
}
.tool .duel-player.p1 .duel-name { text-align: right; }
/* Status: the dot sits inline with the first word, so a two-line status stays centered */
.tool .duel-status { display: block; padding-top: 12px; padding-bottom: 12px; }
.tool .duel-status::before { display: inline-block; margin-right: 8px; vertical-align: 0; }
.tool .duel-reset { align-self: center; font-size: 13px; font-weight: 750; color: rgb(var(--ink) / .5); text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px; min-height: 32px; }
.tool .duel-who { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tool .duel-who .btn { flex: 1 1 0; min-height: 48px; }
.tool .duel-note.duel-warn { padding: 10px 14px; border-radius: 14px; background: rgb(var(--p1) / .14); color: rgb(var(--ink) / .85); font-weight: 750; }
.tool .duel-draws small { font-size: 11px; color: rgb(var(--ink) / .58); }
.tool .duel-strip { margin-top: 4px; }
@media (prefers-color-scheme: dark) {
  .tool.duel .btn-secondary { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .16); }
}

/* Layout: phone is one column (strip, status, board, then actions); desktop puts the board left and the side column right,
   so the whole board fits on the first screen. */
.tool .duel-main { display: flex; flex-direction: column; gap: 12px; }
.tool .duel-side { display: contents; }
.tool .duel-main .duel-strip { order: 1; }
.tool .duel-main .duel-status { order: 2; }
.tool .duel-main .duel-board { order: 3; }
.tool .duel-side > :not(.duel-strip):not(.duel-status) { order: 4; }
@media (min-width: 900px) {
  .tool .duel-main { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 24px; align-items: start; }
  .tool .duel-main > .duel-board { order: 0; }
  .tool .duel-main > .duel-side { order: 1; }
  .tool .duel-side { display: flex; flex-direction: column; gap: 12px; }
  .tool .duel-main .duel-board { margin: 0; }
  .tool .duel-side .duel-strip { grid-template-columns: 1fr; gap: 6px; }
  .tool .duel-side .duel-draws { flex-direction: row; gap: 6px; justify-content: center; }
  .tool .duel-side .duel-player.p1 { flex-direction: row-reverse; justify-content: flex-end; }
  .tool .duel-side .duel-player.p1 .duel-name { text-align: left; }
  .tool .duel-side .duel-player.p1 .duel-score-n { margin: 0 0 0 auto; }
  .tool .duel-side .duel-player.p1 .duel-you { left: 12px; right: auto; }
  .tool .duel-side .duel-actions { flex-direction: column; }
  .tool .duel-side .duel-actions .btn { width: 100%; justify-content: center; flex: 0 0 auto; }
  .tool .duel-side .duel-note { text-align: left; }
  .tool .duel-side .duel-opts { flex-direction: column; }
}
.tool .duel-sound { min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13px; font-weight: 750; color: rgb(var(--ink) / .7); background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); }
.tool .duel-sound[aria-pressed="true"] { background: rgb(var(--ink)); color: var(--bg); box-shadow: none; }
.tool .duel-ask input { flex: 1 1 140px; max-width: 200px; }
.tool .duel-note, .tool .duel-draws, .tool .duel-opt-l { color: rgb(var(--ink) / .7); }