.duel-entry-button {
  position: absolute;
  z-index: 450;
  top: 100px;
  left: 12px;
  border: 1px solid rgba(95, 242, 255, .75);
  border-radius: 10px;
  padding: 8px 12px;
  color: #eaffff;
  background: rgba(6, 20, 37, .82);
  font: 700 12px system-ui, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
.duel-entry-button:hover { background: rgba(0, 148, 180, .75); }
.duel-welcome-button { width: 100%; margin-top: 8px; }

.duel-modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 5, 14, .78);
  font-family: system-ui, sans-serif;
}
.duel-modal[hidden] { display: none; }
.duel-card {
  width: min(420px, 100%);
  padding: 22px;
  border: 1px solid rgba(96, 231, 255, .5);
  border-radius: 18px;
  color: #eafaff;
  background: linear-gradient(145deg, #101d35, #080d19 72%);
  box-shadow: 0 20px 70px #000b;
}
.duel-card h2 { margin: 0 0 8px; font-size: 20px; }
.duel-card p { color: #a9bacd; font-size: 13px; }
.duel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.duel-actions > button { flex: 1 1 120px; }
.duel-match-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
  color: #a9bacd;
  font-size: 12px;
}
.duel-match-settings label { display: grid; gap: 6px; }
.duel-match-settings select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #35516a;
  border-radius: 9px;
  padding: 0 10px;
  color: inherit;
  background: #111d2b;
  font: inherit;
}
.duel-match-settings input[type=range] {
  width: 100%;
  min-height: 20px;
  border: 0;
  padding: 0;
  background: transparent;
  accent-color: #53e9ff;
}
.duel-match-settings output { float: right; color: #7ef3ff; }
.duel-match-settings select:disabled,
.duel-match-settings input:disabled { opacity: .55; }
.duel-card button, .duel-card input {
  min-height: 42px;
  border: 1px solid #35516a;
  border-radius: 9px;
  padding: 0 12px;
  color: inherit;
  background: #111d2b;
  font: inherit;
}
.duel-card button { cursor: pointer; }
.duel-card button:hover { border-color: #53e9ff; }
.duel-card input { min-width: 0; flex: 1; text-transform: uppercase; }
.duel-lobby-code { color: #7ef3ff !important; font-size: 25px !important; font-weight: 800; letter-spacing: .18em; }
.duel-player-list { display: grid; gap: 8px; padding: 0; list-style: none; }
.duel-player-list li { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 8px; background: #ffffff0c; }
.duel-player-list img { width: 28px; height: 28px; border-radius: 50%; }
.duel-player-list a { color: #eafaff; }
.duel-player-ready { margin-left: auto; color: #8ef5bd; font-size: 11px; text-transform: uppercase; }
.duel-card .duel-primary { border-color: #33dff5; background: #07566b; font-weight: 700; }
.duel-status { min-height: 18px; color: #9dd3df !important; }

.game-column.duel-active { overflow: hidden; }
.game-column.duel-active:not(.duel-split) #duel-opponent-view {
  top: 58px;
  right: 12px;
  left: auto;
  width: min(42%, 360px);
  height: min(38vh, 280px);
  min-width: 180px;
  min-height: 150px;
  resize: both;
  z-index: 90;
}
.duel-turn-panel {
  position: absolute;
  z-index: 420;
  top: 104px;
  right: 12px;
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 9px 11px;
  border: 1px solid #52eaffaa;
  border-radius: 10px;
  color: #e8fbff;
  background: #071625e8;
  font: 700 11px system-ui, sans-serif;
}
.duel-turn-panel strong { color: #72f1ff; text-transform: uppercase; }
.duel-turn-panel button { justify-self: end; border: 1px solid #45657c; border-radius: 6px; padding: 4px 8px; color: inherit; background: #102438; cursor: pointer; }
.game-column.duel-split #duel-opponent-view { z-index: 90; }
.duel-opponent-header { position: absolute; z-index: 101; right: 22px; bottom: 8px; left: 8px; height: 36px; border-radius: 8px; background: #122236ed; }
.game-column.duel-split #duel-opponent-canvas { height: 100%; }
#duel-opponent-view {
  position: absolute;
  z-index: 90;
  overflow: hidden;
  resize: none;
  border: 1px solid rgba(105, 235, 255, .8);
  background: #050b13ed;
  box-shadow: 0 8px 30px #000a;
}
.duel-opponent-header {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #e7fbff;
  background: #122236;
  font: 700 11px system-ui, sans-serif;
}
.duel-opponent-header a { color: inherit; text-decoration: none; }
.duel-opponent-avatar { width: 22px; height: 22px; border-radius: 50%; }
.duel-opponent-score { margin-left: auto; color: #91f4ff; white-space: nowrap; }
.duel-opponent-status { max-width: 45%; overflow: hidden; color: #a9bacd; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.duel-layout-toggle,
.duel-leave-button {
  border: 1px solid #47687c;
  border-radius: 6px;
  padding: 3px 6px;
  color: #e7fbff;
  background: #0c1723;
  font-size: 10px;
  cursor: pointer;
}
#duel-opponent-canvas { position: relative; width: 100%; height: calc(100% - 36px); overflow: hidden; }
.game-column.duel-active #duel-opponent-canvas { height: 100%; }
#duel-opponent-canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.game-column.duel-split > canvas { left: 0; width: 50% !important; height: 100% !important; }
.game-column.duel-split #duel-opponent-view {
  top: 0; right: 0; width: 50%; height: 100%; min-width: 0; min-height: 0;
  border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0;
}
@media (max-width: 700px) {
  .game-column.duel-split > canvas { width: 100% !important; height: 50% !important; }
  .game-column.duel-split #duel-opponent-view {
    top: 50%; right: 0; width: 100%; height: 50%; border: 0; border-top: 1px solid rgba(105, 235, 255, .8);
  }
  .game-column.duel-active:not(.duel-split) #duel-opponent-view {
    top: 52px; right: 8px; width: 48%; height: 28vh; min-width: 150px; min-height: 120px;
  }
  .game-column.duel-split #rotate-control,
  .game-column.duel-split #zoom-control { bottom: calc(50% + 12px); }
  .duel-opponent-header { right: 20px; height: 32px; padding: 0 6px; gap: 5px; font-size: 10px; }
  #duel-opponent-canvas { height: calc(100% - 32px); }
  .duel-match-settings { grid-template-columns: 1fr; }
}
.duel-chat {
  position: absolute;
  z-index: 100;
  right: 12px;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  width: 290px;
  height: 250px;
  min-width: min(190px, calc(100% - 24px));
  min-height: 90px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 68px);
  resize: both;
  overflow: hidden;
  border: 1px solid rgba(110, 233, 255, .48);
  border-radius: 11px;
  color: #e9faff;
  background: rgb(34 180 255 / .2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  backdrop-filter: blur(5px);
  font: 12px system-ui, sans-serif;
}
.game-column > .duel-chat { top: calc(var(--hud-height, 130px) + 80px); bottom: auto; max-height: max(90px, calc(100% - var(--hud-height, 130px) - 330px)); }
.duel-chat-header {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(110, 233, 255, .22);
  color: #9af4ff;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.duel-chat-header:active { cursor: grabbing; }
.duel-chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  overflow: auto;
  padding: 8px;
}
.duel-chat-line {
  max-width: 95%;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .09);
  overflow-wrap: anywhere;
}
.duel-chat-line[data-kind="self"] { align-self: flex-end; background: rgba(25, 115, 140, .38); }
.duel-chat-line[data-kind="system"] { color: #9cb6c2; font-style: italic; }
.duel-chat-form { display: flex; gap: 5px; padding: 6px; border-top: 1px solid rgba(110, 233, 255, .2); }
.duel-chat-form input {
  flex: 1;
  min-width: 0;
  height: 31px;
  padding: 0 8px;
  border: 1px solid rgba(110, 233, 255, .28);
  border-radius: 6px;
  color: inherit;
  background: rgba(0, 0, 0, .3);
  font: inherit;
}
.duel-chat-form button {
  border: 1px solid rgba(110, 233, 255, .38);
  border-radius: 6px;
  padding: 0 9px;
  color: inherit;
  background: rgba(15, 67, 82, .7);
  cursor: pointer;
}
@media (max-width: 700px) {
  .duel-chat { width: min(290px, calc(100% - 24px)); height: 210px; }
}