:root {
  --bg: #07110f;
  --panel: #0f201c;
  --panel2: #142c26;
  --line: #2f5f52;
  --gold: #f5c76b;
  --green: #5ef0a5;
  --blue: #68d4ff;
  --text: #eefcf7;
  --muted: #a7c7bd;
  --danger: #ff7d7d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(94,240,165,.20), transparent 30%),
    radial-gradient(circle at bottom right, rgba(104,212,255,.15), transparent 30%),
    var(--bg);
  color: var(--text);
}

.shell {
  width: min(1400px, 96vw);
  margin: 0 auto;
  padding: 24px 0;
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 22px;
}

.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  margin: 0 0 8px;
}

h1 {
  font-size: clamp(42px, 8vw, 90px);
  margin: 0;
  line-height: .9;
}

.subtitle {
  color: var(--muted);
  font-size: 18px;
  max-width: 740px;
}

.status-card, .card, .board-panel {
  background: linear-gradient(180deg, rgba(20,44,38,.95), rgba(15,32,28,.95));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.status-card {
  min-width: 160px;
  padding: 18px;
  color: var(--muted);
}

.status-card strong {
  display: block;
  margin-top: 8px;
  color: var(--green);
  font-size: 28px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 22px;
}

.board-panel {
  padding: 18px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

button {
  border: 1px solid var(--line);
  background: #17372f;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

button:hover, button.active {
  background: var(--gold);
  color: #1a1204;
}

.levels {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.levelNotice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(104,212,255,.35);
  background: rgba(104,212,255,.08);
  color: var(--blue);
  border-radius: 14px;
  font-weight: 700;
}

.board-wrap {
  display: flex;
  justify-content: center;
}

.board {
  display: grid;
  grid-template-columns: repeat(8, minmax(38px, 74px));
  gap: 5px;
}

.cell {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  position: relative;
  font-size: clamp(24px, 4vw, 44px);
  cursor: pointer;
  user-select: none;
}

.cell.dark { background: #10211d; }
.cell.light { background: #1b3a32; }

.cell.selected {
  outline: 4px solid var(--gold);
}

.cell.legal {
  box-shadow: inset 0 0 0 4px var(--green);
}

.cell.crossLevel {
  box-shadow: inset 0 0 0 4px var(--blue);
}

.coord {
  position: absolute;
  right: 5px;
  bottom: 4px;
  font-size: 10px;
  color: rgba(238,252,247,.45);
}

.white-piece { color: #ffffff; text-shadow: 0 2px 8px #000; }
.black-piece { color: #9fb4ad; text-shadow: 0 2px 8px #000; }

.side-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.card {
  padding: 18px;
}

.card h2 {
  margin: 0 0 10px;
  color: var(--gold);
}

.card p, .card li {
  color: var(--muted);
  line-height: 1.45;
}

.smallNote {
  margin-top: -4px;
  font-size: 13px;
}

.moveGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

.moveBtn {
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(94,240,165,.28);
  background: rgba(94,240,165,.08);
  color: var(--text);
  text-align: left;
  font-size: 13px;
}

.moveBtn.otherLevel {
  border-color: rgba(104,212,255,.45);
  background: rgba(104,212,255,.10);
}

.moveBtn.capture {
  border-color: rgba(255,125,125,.45);
  background: rgba(255,125,125,.10);
}

.moveBtn:hover {
  background: var(--gold);
  color: #1a1204;
}

#moveLog {
  margin: 0;
  padding-left: 20px;
  max-height: 320px;
  overflow: auto;
}

@media (max-width: 1000px) {
  .hero, .layout {
    grid-template-columns: 1fr;
    display: grid;
  }
}
.kingCheck {
  outline: 4px solid var(--danger) !important;
  box-shadow: inset 0 0 0 4px var(--danger), 0 0 24px rgba(255,125,125,.65) !important;
}

.dangerNotice {
  border-color: rgba(255,125,125,.65) !important;
  background: rgba(255,125,125,.12) !important;
  color: #ffd1d1 !important;
}

.captureBox {
  display: grid;
  gap: 12px;
}

.captureBox h3 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.capturedLine {
  min-height: 34px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: 12px;
  font-size: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.emptyText {
  color: rgba(238,252,247,.45);
  font-size: 13px;
}

.rulebook p {
  margin: 0 0 9px;
  font-size: 14px;
}

.hidden {
  display: none !important;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}

.modalCard {
  width: min(520px, 94vw);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #17372f, #0f201c);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
}

.modalCard h2 {
  margin: 0 0 10px;
  color: var(--gold);
}

.promotionButtons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.cubeLivePanel {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(104,212,255,.38);
  background: rgba(0,0,0,.18);
  border-radius: 20px;
}

.cubeLiveHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cubeLiveHeader h2 {
  margin: 0;
  color: var(--gold);
}

.cubeLiveHeader p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 620px;
}

.cubeLiveControls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cubeLiveControls button {
  padding: 8px 10px;
  font-size: 12px;
}

#liveCube3d {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(3,10,8,.78);
}

#soundToggleBtn {
  border-color: rgba(245,199,107,.55);
}

#soundToggleBtn:hover {
  filter: brightness(1.08);
}


.visualPolishHud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(104,212,255,.28);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 18px rgba(104,212,255,.10);
  font-size: 13px;
}

.visualPolishHud span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

body[data-turn="white"] #turnLabel,
body[data-turn="white"] #visualTurnText {
  box-shadow: 0 0 18px rgba(255,255,255,.22);
}

body[data-turn="black"] #turnLabel,
body[data-turn="black"] #visualTurnText {
  box-shadow: 0 0 18px rgba(104,212,255,.22);
}

body.avatarThinkingNow #visualThinkingText,
body.avatarThinkingNow .levelNotice {
  animation: chess3ThinkingPulse 1s infinite ease-in-out;
  border-color: rgba(245,199,107,.55);
}

.cell.lastMoveFrom {
  outline: 3px solid rgba(245,199,107,.60);
  outline-offset: -4px;
}

.cell.lastMoveTo {
  outline: 4px solid rgba(94,240,165,.85);
  outline-offset: -5px;
  animation: chess3LastMovePulse 1.1s infinite ease-in-out;
}

.cell.legal {
  animation: chess3LegalPulse 1.4s infinite ease-in-out;
}

@keyframes chess3ThinkingPulse {
  0% { box-shadow: 0 0 8px rgba(245,199,107,.16); }
  50% { box-shadow: 0 0 24px rgba(245,199,107,.42); }
  100% { box-shadow: 0 0 8px rgba(245,199,107,.16); }
}

@keyframes chess3LastMovePulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.28); }
  100% { filter: brightness(1); }
}

@keyframes chess3LegalPulse {
  0% { box-shadow: inset 0 0 0 rgba(94,240,165,.0); }
  50% { box-shadow: inset 0 0 18px rgba(94,240,165,.22); }
  100% { box-shadow: inset 0 0 0 rgba(94,240,165,.0); }
}


/* Phase 5A1 - stronger 2D legal move visibility */
.cell {
  position: relative;
}

.cell.legal::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 42%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(94,240,165,.82);
  box-shadow:
    0 0 10px rgba(94,240,165,.95),
    0 0 22px rgba(94,240,165,.55);
  pointer-events: none;
  z-index: 4;
}

.cell.legal span {
  position: relative;
  z-index: 5;
}

.cell.legal:has(.white-piece)::after,
.cell.legal:has(.black-piece)::after {
  width: 58%;
  height: 58%;
  background: rgba(255,105,105,.68);
  box-shadow:
    0 0 10px rgba(255,105,105,.95),
    0 0 24px rgba(255,105,105,.62);
}

.cell.selected {
  outline: 4px solid rgba(245,199,107,.95);
  outline-offset: -5px;
  box-shadow:
    inset 0 0 18px rgba(245,199,107,.30),
    0 0 18px rgba(245,199,107,.35);
}

.cell.lastMoveFrom {
  outline: 3px solid rgba(245,199,107,.72);
  outline-offset: -6px;
}

.cell.lastMoveTo {
  outline: 4px solid rgba(104,212,255,.95);
  outline-offset: -7px;
  box-shadow:
    inset 0 0 16px rgba(104,212,255,.28),
    0 0 18px rgba(104,212,255,.38);
}

.levelNotice {
  font-weight: 700;
}


/* Phase 5A2 - extra visual polish */
.chess3GuidePanel {
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(245,199,107,.30);
  background:
    radial-gradient(circle at top left, rgba(245,199,107,.14), transparent 32%),
    rgba(0,0,0,.24);
  box-shadow: 0 0 24px rgba(245,199,107,.10);
}

.guideTitle {
  font-weight: 800;
  color: #f5c76b;
  margin-bottom: 8px;
  letter-spacing: .02em;
}

.guideGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  font-size: 13px;
}

.guideGrid span {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}

.chess3CheckBanner {
  display: none;
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 16px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
  background: linear-gradient(90deg, rgba(255,50,50,.24), rgba(245,199,107,.18), rgba(255,50,50,.24));
  border: 1px solid rgba(255,80,80,.55);
  box-shadow: 0 0 28px rgba(255,80,80,.25);
  animation: chess3CheckBannerPulse 1s infinite ease-in-out;
}

body.chess3CheckMode canvas {
  box-shadow:
    0 0 0 1px rgba(255,80,80,.22),
    0 0 28px rgba(255,80,80,.18);
}

.panel {
  box-shadow:
    0 0 0 1px rgba(104,212,255,.08),
    0 18px 45px rgba(0,0,0,.24);
}

canvas {
  box-shadow:
    inset 0 0 42px rgba(104,212,255,.055),
    0 0 20px rgba(104,212,255,.08);
}

.cell {
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}

.cell:hover {
  transform: scale(1.025);
  filter: brightness(1.12);
  z-index: 8;
}

.cell.legal:hover {
  transform: scale(1.045);
}

.cell.selected:hover {
  transform: scale(1.045);
}

#guideToggleBtn {
  border-color: rgba(104,212,255,.55);
}

#guideToggleBtn:hover {
  filter: brightness(1.10);
}

.captured,
.moveLog,
#legalMoveList,
#coachText,
#selectedText {
  scrollbar-width: thin;
}

@keyframes chess3CheckBannerPulse {
  0% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.28); transform: scale(1.01); }
  100% { filter: brightness(1); transform: scale(1); }
}


#rulesLabNotice {
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 8px 12px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .03em;
  color: #07110f;
  background: linear-gradient(90deg, #f5c76b, #5ef0a5, #68d4ff);
  border-bottom: 1px solid rgba(255,255,255,.22);
}


/* Phase 5R-B2 - promotion lab polish */
.promotionBox h2::after {
  content: " - Rules Lab";
  color: rgba(104,212,255,.85);
  font-size: .72em;
}


/* Phase 5R-C - en passant lab */
#rulesLabNotice::after {
  content: " | En Passant active";
  font-weight: 900;
}


/* Phase 5R-C2 - horizontal + vertical en passant */
#rulesLabNotice::after {
  content: " | En Passant Y+Z active";
  font-weight: 900;
}


/* Phase 5R-C3 - advanced rulebook polish */
.advancedRules5RC3 {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(245,199,107,.32);
  background: rgba(0,0,0,.20);
}

.advancedRules5RC3 h2 {
  margin-top: 0;
  color: #f5c76b;
}

.advancedRules5RC3 h3 {
  margin-bottom: 6px;
  color: #68d4ff;
}

.advancedRules5RC3 p {
  line-height: 1.45;
}

#rulesLabNotice::after {
  content: " | Complete advanced rules";
  font-weight: 900;
}


/* Phase 5R-C4 - concede / resign */
.dangerBtn,
#concedeBtn {
  border-color: rgba(255,96,96,.65) !important;
  background: rgba(120,20,28,.78) !important;
  color: #fff !important;
}

.dangerBtn:hover,
#concedeBtn:hover {
  background: rgba(255,96,96,.92) !important;
  color: #190707 !important;
  filter: brightness(1.1);
}

#rulesLabNotice::after {
  content: " | Concede active";
  font-weight: 900;
}


/* Concede button repair */
.dangerBtn,
#concedeBtn {
  border-color: rgba(255,96,96,.75) !important;
  background: rgba(120,20,28,.84) !important;
  color: #fff !important;
}

.dangerBtn:hover,
#concedeBtn:hover {
  background: rgba(255,96,96,.95) !important;
  color: #190707 !important;
  filter: brightness(1.1);
}


/* Phase 6A - mobile responsive layout */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

button {
  touch-action: manipulation;
}

#mobileModeBtn {
  border-color: rgba(94,240,165,.58);
  background: rgba(23,55,47,.88);
}

#mobileModeBtn:hover {
  filter: brightness(1.12);
}

@media (max-width: 900px) {
  body {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .controls,
  .topControls,
  .buttonRow,
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .controls button,
  .topControls button,
  .buttonRow button,
  .toolbar button,
  button {
    min-height: 40px;
    padding: 9px 11px;
    font-size: 14px;
  }

  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  .panel,
  .boardPanel,
  .cubePanel,
  .sidePanel,
  .movePanel,
  .rulebookPanel,
  .chess3GuidePanel,
  .visualPolishHud {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  body.chess3MobileActive,
  body.chess3MobileForced {
    padding: 8px;
  }

  body.chess3MobileActive main,
  body.chess3MobileForced main,
  body.chess3MobileActive .app,
  body.chess3MobileForced .app,
  body.chess3MobileActive .layout,
  body.chess3MobileForced .layout,
  body.chess3MobileActive .gameLayout,
  body.chess3MobileForced .gameLayout,
  body.chess3MobileActive .container,
  body.chess3MobileForced .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.chess3MobileActive .panel,
  body.chess3MobileForced .panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.chess3MobileActive .controls,
  body.chess3MobileForced .controls {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 8px;
    border-radius: 14px;
    background: rgba(7,17,15,.92);
    border: 1px solid rgba(104,212,255,.16);
    backdrop-filter: blur(7px);
  }

  body.chess3MobileActive .controls button,
  body.chess3MobileForced .controls button {
    flex: 1 1 calc(50% - 8px);
    min-width: 128px;
  }

  body.chess3MobileActive canvas,
  body.chess3MobileForced canvas {
    width: 100% !important;
    max-width: min(100%, 420px) !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  body.chess3MobileActive .board,
  body.chess3MobileForced .board,
  body.chess3MobileActive #board,
  body.chess3MobileForced #board {
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.chess3MobileActive .grid,
  body.chess3MobileForced .grid,
  body.chess3MobileActive .boardGrid,
  body.chess3MobileForced .boardGrid,
  body.chess3MobileActive #boardGrid,
  body.chess3MobileForced #boardGrid {
    width: 100% !important;
    max-width: 420px !important;
    aspect-ratio: 1 / 1;
  }

  body.chess3MobileActive .cell,
  body.chess3MobileForced .cell {
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: clamp(17px, 6vw, 31px) !important;
    line-height: 1 !important;
  }

  body.chess3MobileActive .cell.legal::after,
  body.chess3MobileForced .cell.legal::after {
    width: 38%;
    height: 38%;
  }

  body.chess3MobileActive .levels,
  body.chess3MobileForced .levels,
  body.chess3MobileActive #levels,
  body.chess3MobileForced #levels {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  body.chess3MobileActive .levels button,
  body.chess3MobileForced .levels button,
  body.chess3MobileActive #levels button,
  body.chess3MobileForced #levels button {
    min-height: 38px;
    padding: 7px 6px;
    font-size: 12px;
  }

  body.chess3MobileActive .visualPolishHud,
  body.chess3MobileForced .visualPolishHud {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    font-size: 12px;
  }

  body.chess3MobileActive .guideGrid,
  body.chess3MobileForced .guideGrid {
    grid-template-columns: 1fr;
  }

  body.chess3MobileActive .moveLog,
  body.chess3MobileForced .moveLog,
  body.chess3MobileActive #moveLog,
  body.chess3MobileForced #moveLog,
  body.chess3MobileActive .rulebookPanel,
  body.chess3MobileForced .rulebookPanel,
  body.chess3MobileActive #rulebookPanel,
  body.chess3MobileForced #rulebookPanel {
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.chess3MobileActive .promotionBox,
  body.chess3MobileForced .promotionBox {
    width: calc(100vw - 24px);
    max-width: 420px;
  }

  body.chess3MobileActive .promotionChoices,
  body.chess3MobileForced .promotionChoices {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  body.chess3MobileActive .controls button,
  body.chess3MobileForced .controls button {
    flex: 1 1 100%;
    min-width: 100%;
  }

  body.chess3MobileActive .levels,
  body.chess3MobileForced .levels,
  body.chess3MobileActive #levels,
  body.chess3MobileForced #levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.chess3MobileActive .cell,
  body.chess3MobileForced .cell {
    font-size: clamp(15px, 7vw, 26px) !important;
  }

  body.chess3MobileActive h1,
  body.chess3MobileForced h1 {
    font-size: 24px;
  }
}

body.chess3DesktopForced .controls {
  position: static !important;
}


/* Phase 6A2 - forced phone preview repair */
body.chess3PhonePreview {
  width: min(430px, 100vw) !important;
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 8px !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at top, rgba(94,240,165,.08), transparent 38%),
    #07110f !important;
}

body.chess3PhonePreview * {
  max-width: 100%;
  box-sizing: border-box;
}

body.chess3PhonePreview #rulesLabNotice {
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  padding: 7px !important;
}

body.chess3PhonePreview .chess3MobileStackCandidate {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.chess3PhonePreview .controls,
body.chess3PhonePreview .topControls,
body.chess3PhonePreview .buttonRow,
body.chess3PhonePreview .toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  align-items: center !important;
  width: 100% !important;
  position: sticky !important;
  top: 28px !important;
  z-index: 1500 !important;
  background: rgba(7,17,15,.94) !important;
  border-radius: 14px !important;
  padding: 7px !important;
  backdrop-filter: blur(7px);
}

body.chess3PhonePreview button {
  min-height: 38px !important;
  padding: 8px 9px !important;
  font-size: 12px !important;
  touch-action: manipulation !important;
}

body.chess3PhonePreview .controls button,
body.chess3PhonePreview .topControls button,
body.chess3PhonePreview .buttonRow button,
body.chess3PhonePreview .toolbar button {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 118px !important;
}

body.chess3PhonePreview canvas {
  width: 100% !important;
  max-width: 410px !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.chess3PhonePreview .board,
body.chess3PhonePreview #board,
body.chess3PhonePreview .boardGrid,
body.chess3PhonePreview #boardGrid,
body.chess3PhonePreview .grid {
  width: 100% !important;
  max-width: 410px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.chess3PhonePreview .cell {
  min-width: 0 !important;
  min-height: 0 !important;
  font-size: clamp(16px, 6vw, 28px) !important;
  line-height: 1 !important;
}

body.chess3PhonePreview .levels,
body.chess3PhonePreview #levels {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}

body.chess3PhonePreview .levels button,
body.chess3PhonePreview #levels button {
  min-height: 34px !important;
  padding: 6px 5px !important;
  font-size: 11px !important;
}

body.chess3PhonePreview .sidePanel,
body.chess3PhonePreview .rightPanel,
body.chess3PhonePreview .moveLog,
body.chess3PhonePreview #moveLog,
body.chess3PhonePreview .rulebookPanel,
body.chess3PhonePreview #rulebookPanel,
body.chess3PhonePreview .chess3GuidePanel,
body.chess3PhonePreview .visualPolishHud {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.chess3PhonePreview h1 {
  font-size: 26px !important;
  line-height: 1.05 !important;
}

body.chess3PhonePreview .promotionBox {
  width: calc(100vw - 24px) !important;
  max-width: 400px !important;
}

body.chess3PhonePreview .promotionChoices {
  grid-template-columns: 1fr !important;
}

body.chess3PhonePreviewOff {
  width: auto !important;
  max-width: none !important;
  margin-left: initial !important;
  margin-right: initial !important;
}

/* Phone preview label */
body.chess3PhonePreview #mobileModeBtn {
  outline: 2px solid rgba(245,199,107,.75) !important;
}


/* Phase 6A3 - mobile control and layout repair */
body.chess3PhonePreview {
  width: min(430px, 100vw) !important;
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.chess3PhonePreview main,
body.chess3PhonePreview .app,
body.chess3PhonePreview .container,
body.chess3PhonePreview .layout,
body.chess3PhonePreview .gameLayout,
body.chess3PhonePreview .shell {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.chess3PhonePreview aside,
body.chess3PhonePreview .sidePanel,
body.chess3PhonePreview .rightPanel,
body.chess3PhonePreview .sidebar {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.chess3PhonePreview .panel,
body.chess3PhonePreview .card,
body.chess3PhonePreview section {
  width: 100% !important;
  max-width: 100% !important;
}

body.chess3PhonePreview #rulesLabNotice {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 8px auto !important;
  text-align: center !important;
  transform: none !important;
}

body.chess3PhonePreview .controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body.chess3PhonePreview .controls button {
  width: 100% !important;
  min-width: 0 !important;
}

body.chess3PhonePreview button {
  cursor: pointer !important;
  pointer-events: auto !important;
}

body.chess3PhonePreview #concedeBtn,
body.chess3PhonePreview .dangerBtn {
  grid-column: 1 / -1 !important;
}

body.chess3PhonePreview .levels,
body.chess3PhonePreview #levels {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body.chess3PhonePreview canvas {
  max-height: 260px !important;
  object-fit: contain !important;
}

body.chess3PhonePreview .moveLog,
body.chess3PhonePreview #moveLog,
body.chess3PhonePreview .rulebookPanel,
body.chess3PhonePreview #rulebookPanel,
body.chess3PhonePreview .legalMoves,
body.chess3PhonePreview #legalMoves {
  max-height: 220px !important;
  overflow-y: auto !important;
}

body.chess3PhonePreview::before {
  content: "PHONE PREVIEW";
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 4000;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  background: rgba(245,199,107,.92);
  color: #07110f;
}


/* Phase 6B - local champion board */
.chess3ChampionBoard {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(94,240,165,.30);
  background:
    radial-gradient(circle at top left, rgba(94,240,165,.12), transparent 32%),
    rgba(0,0,0,.24);
  box-shadow: 0 0 24px rgba(94,240,165,.08);
}

.champHeader h2 {
  margin: 0 0 4px;
  color: #5ef0a5;
}

.champHeader p {
  margin: 0 0 12px;
  color: #a7c7bd;
}

.champInputs {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.champInputs label {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
}

.champInputs input {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(104,212,255,.24);
  background: rgba(255,255,255,.06);
  color: #eefcf7;
  padding: 8px 10px;
}

.champButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.champButtons button {
  min-height: 38px;
}

.championSummary {
  padding: 10px;
  border-radius: 12px;
  background: rgba(245,199,107,.10);
  border: 1px solid rgba(245,199,107,.22);
  margin-bottom: 12px;
}

.championTableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.champTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.champTable th,
.champTable td {
  padding: 8px 9px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  font-size: 13px;
}

.champTable th {
  color: #68d4ff;
  background: rgba(255,255,255,.045);
}

.recentMatches {
  margin: 8px 0 0;
  padding-left: 18px;
}

.recentMatches li {
  margin-bottom: 5px;
}

.chess3ExportBox {
  width: 100%;
  min-height: 100px;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(104,212,255,.24);
  background: rgba(0,0,0,.28);
  color: #eefcf7;
  padding: 10px;
  font-family: Consolas, monospace;
  font-size: 12px;
}

body.chess3PhonePreview .champInputs {
  grid-template-columns: 1fr !important;
}

body.chess3PhonePreview .champButtons {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

body.chess3PhonePreview .champTable {
  min-width: 560px;
}

body.chess3PhonePreview .chess3ChampionBoard {
  width: 100% !important;
  max-width: 100% !important;
}


/* Phase 6D1 - frontend cloud bridge */
.chess3CloudBridge {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(104,212,255,.32);
  background:
    radial-gradient(circle at top right, rgba(104,212,255,.12), transparent 34%),
    rgba(0,0,0,.24);
  box-shadow: 0 0 24px rgba(104,212,255,.08);
}

.chess3CloudBridge.cloudDisabled {
  opacity: .92;
}

.chess3CloudBridge.cloudEnabled {
  border-color: rgba(94,240,165,.55);
  box-shadow: 0 0 28px rgba(94,240,165,.12);
}

.cloudHeader h2 {
  margin: 0 0 4px;
  color: #68d4ff;
}

.cloudHeader p {
  margin: 0 0 12px;
  color: #a7c7bd;
}

.cloudGrid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.cloudGrid label,
.cloudChecks label {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
}

.cloudGrid input {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(104,212,255,.24);
  background: rgba(255,255,255,.06);
  color: #eefcf7;
  padding: 8px 10px;
}

.cloudChecks {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 10px 0;
}

.cloudChecks label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.055);
}

.cloudButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.chess3CloudStatus,
.chess3CloudQueueSummary {
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
  font-size: 13px;
}

body.chess3PhonePreview .cloudGrid,
body.chess3PhonePreview .cloudChecks {
  grid-template-columns: 1fr !important;
}

body.chess3PhonePreview .cloudButtons {
  display: grid !important;
  grid-template-columns: 1fr !important;
}


/* Phase 6D4 - connected cloud bridge */
.chess3CloudBridge {
  border-color: rgba(94,240,165,.42) !important;
}

.chess3CloudBridge::before {
  content: "6D4 CONNECTED ENDPOINT - SYNC OFF BY DEFAULT";
  display: block;
  margin-bottom: 8px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(94,240,165,.12);
  border: 1px solid rgba(94,240,165,.25);
  color: #5ef0a5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.chess3CloudStatus {
  border-color: rgba(94,240,165,.24) !important;
}

body.chess3PhonePreview .chess3CloudBridge::before {
  font-size: 10px;
  text-align: center;
}


/* Phase 6D4A - visible cloud bridge repair */
.chess3VisibleCloudBridgeD4A {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 2px solid rgba(94,240,165,.60);
  background:
    radial-gradient(circle at top right, rgba(94,240,165,.16), transparent 35%),
    rgba(0,0,0,.30);
  box-shadow: 0 0 30px rgba(94,240,165,.14);
}

.chess3VisibleCloudBridgeD4A::before {
  content: "6D4A VISIBLE CLOUD BRIDGE - HEALTH TEST ONLY";
  display: block;
  margin-bottom: 9px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(94,240,165,.14);
  border: 1px solid rgba(94,240,165,.34);
  color: #5ef0a5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.cloudD4AHeader h2 {
  margin: 0 0 4px;
  color: #5ef0a5;
}

.cloudD4AHeader p {
  margin: 0 0 12px;
  color: #d7fff1;
}

.cloudD4ALabel {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 10px;
}

.cloudD4ALabel input {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(104,212,255,.35);
  background: rgba(255,255,255,.07);
  color: #eefcf7;
  padding: 8px 10px;
}

.cloudD4AButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.cloudD4AButtons button {
  min-height: 38px;
}

.chess3CloudStatusD4A {
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(94,240,165,.30);
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
}

.chess3CloudQueueBoxD4A {
  width: 100%;
  min-height: 120px;
  border-radius: 12px;
  border: 1px solid rgba(104,212,255,.24);
  background: rgba(0,0,0,.30);
  color: #eefcf7;
  padding: 10px;
  font-family: Consolas, monospace;
  font-size: 12px;
}

body.chess3PhonePreview .cloudD4AButtons {
  display: grid !important;
  grid-template-columns: 1fr !important;
}


/* Phase 6D7 - manual frontend cloud sync */
.chess3ManualCloudSyncD7 {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 2px solid rgba(245,199,107,.62);
  background:
    radial-gradient(circle at top left, rgba(245,199,107,.14), transparent 34%),
    rgba(0,0,0,.30);
  box-shadow: 0 0 30px rgba(245,199,107,.12);
}

.chess3ManualCloudSyncD7::before {
  content: "6D7 MANUAL SYNC ONLY - NO AUTOMATIC PUBLIC SYNC";
  display: block;
  margin-bottom: 9px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(245,199,107,.14);
  border: 1px solid rgba(245,199,107,.34);
  color: #f5c76b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.manualCloudHeaderD7 h2 {
  margin: 0 0 4px;
  color: #f5c76b;
}

.manualCloudHeaderD7 p {
  margin: 0 0 12px;
  color: #fff6d8;
}

.manualCloudEndpointD7 {
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(245,199,107,.22);
  margin-bottom: 10px;
  font-size: 12px;
  word-break: break-all;
}

.manualCloudButtonsD7 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.manualCloudButtonsD7 button {
  min-height: 38px;
}

.chess3ManualCloudStatusD7 {
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(245,199,107,.30);
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
}

.chess3ManualCloudBoxD7 {
  width: 100%;
  min-height: 150px;
  border-radius: 12px;
  border: 1px solid rgba(104,212,255,.24);
  background: rgba(0,0,0,.30);
  color: #eefcf7;
  padding: 10px;
  font-family: Consolas, monospace;
  font-size: 12px;
}

body.chess3PhonePreview .manualCloudButtonsD7 {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

body.chess3PhonePreview .chess3ManualCloudSyncD7::before {
  font-size: 10px;
  text-align: center;
}


/* Phase 6D7E - final responsive layout controller
   Clean fork from 6D7.
   Desktop/tablet/phone are automatic.
   Preview Phone button is only for laptop testing. */

/* Global safety */
html,
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

body.chess3ResponsiveD7E {
  overflow-x: hidden !important;
}

/* Buttons added by final responsive controller */
.chess3PreviewPhoneButtonD7E {
  border: 1px solid rgba(245,199,107,.65) !important;
  background: rgba(245,199,107,.18) !important;
  color: #fff6d8 !important;
  font-weight: 900 !important;
}

.chess3ResponsiveBadgeD7E {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(104,212,255,.28);
  background: rgba(104,212,255,.10);
  color: #e8fbff;
  font-size: 11px;
  font-weight: 900;
}

/* DESKTOP: fit without clipping */
body.chess3ResponsiveD7E.chess3DesktopD7E .shell {
  width: min(1400px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.chess3ResponsiveD7E.chess3DesktopD7E .layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px) !important;
  gap: 22px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.chess3ResponsiveD7E.chess3DesktopD7E .board-panel,
body.chess3ResponsiveD7E.chess3DesktopD7E .side-panel,
body.chess3ResponsiveD7E.chess3DesktopD7E .cubeLivePanel,
body.chess3ResponsiveD7E.chess3DesktopD7E .card,
body.chess3ResponsiveD7E.chess3DesktopD7E .chess3ChampionBoard,
body.chess3ResponsiveD7E.chess3DesktopD7E .chess3VisibleCloudBridgeD4A,
body.chess3ResponsiveD7E.chess3DesktopD7E .chess3ManualCloudSyncD7 {
  max-width: 100% !important;
  min-width: 0 !important;
}

body.chess3ResponsiveD7E.chess3DesktopD7E .side-panel {
  overflow-x: hidden !important;
}

body.chess3ResponsiveD7E.chess3DesktopD7E .chess3CloudQueueBoxD4A,
body.chess3ResponsiveD7E.chess3DesktopD7E .chess3ManualCloudBoxD7,
body.chess3ResponsiveD7E.chess3DesktopD7E textarea,
body.chess3ResponsiveD7E.chess3DesktopD7E pre,
body.chess3ResponsiveD7E.chess3DesktopD7E code {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* LAPTOP / SMALL DESKTOP: stack right panel underneath before clipping happens */
@media (max-width: 1220px) {
  body.chess3ResponsiveD7E.chess3DesktopD7E .layout {
    grid-template-columns: 1fr !important;
  }

  body.chess3ResponsiveD7E.chess3DesktopD7E .side-panel {
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* TABLET */
body.chess3ResponsiveD7E.chess3TabletD7E .shell {
  width: min(760px, calc(100vw - 18px)) !important;
  max-width: calc(100vw - 18px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.chess3ResponsiveD7E.chess3TabletD7E .layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

body.chess3ResponsiveD7E.chess3TabletD7E .board-panel,
body.chess3ResponsiveD7E.chess3TabletD7E .side-panel,
body.chess3ResponsiveD7E.chess3TabletD7E .cubeLivePanel,
body.chess3ResponsiveD7E.chess3TabletD7E .card,
body.chess3ResponsiveD7E.chess3TabletD7E .chess3ChampionBoard,
body.chess3ResponsiveD7E.chess3TabletD7E .chess3VisibleCloudBridgeD4A,
body.chess3ResponsiveD7E.chess3TabletD7E .chess3ManualCloudSyncD7 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* PHONE and laptop phone preview */
body.chess3ResponsiveD7E.chess3PhoneD7E {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  padding: 8px !important;
  overflow-x: hidden !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .shell {
  width: min(430px, calc(100vw - 12px)) !important;
  max-width: min(430px, calc(100vw - 12px)) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* Exact real structure from diagnostic */
body.chess3ResponsiveD7E.chess3PhoneD7E .layout {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .board-panel,
body.chess3ResponsiveD7E.chess3PhoneD7E .side-panel,
body.chess3ResponsiveD7E.chess3PhoneD7E .cubeLivePanel,
body.chess3ResponsiveD7E.chess3PhoneD7E .card,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3ChampionBoard,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3VisibleCloudBridgeD4A,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3ManualCloudSyncD7,
body.chess3ResponsiveD7E.chess3PhoneD7E #rulebookPanel,
body.chess3ResponsiveD7E.chess3PhoneD7E .rulebook {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .cubeLiveHeader {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .cubeLiveControls,
body.chess3ResponsiveD7E.chess3PhoneD7E .toolbar,
body.chess3ResponsiveD7E.chess3PhoneD7E .controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  position: static !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .cubeLiveControls button,
body.chess3ResponsiveD7E.chess3PhoneD7E .toolbar button,
body.chess3ResponsiveD7E.chess3PhoneD7E .controls button,
body.chess3ResponsiveD7E.chess3PhoneD7E button {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  font-size: 11px !important;
  white-space: normal !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E #concedeBtn,
body.chess3ResponsiveD7E.chess3PhoneD7E .dangerBtn {
  grid-column: 1 / -1 !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E #liveCube3d,
body.chess3ResponsiveD7E.chess3PhoneD7E canvas {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 260px !important;
  object-fit: contain !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .board-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .board,
body.chess3ResponsiveD7E.chess3PhoneD7E #board {
  width: 100% !important;
  max-width: 410px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .cell {
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  font-size: clamp(15px, 6vw, 26px) !important;
  line-height: 1 !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .levels,
body.chess3ResponsiveD7E.chess3PhoneD7E #levelButtons {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .levels button,
body.chess3ResponsiveD7E.chess3PhoneD7E #levelButtons button {
  min-height: 32px !important;
  padding: 5px 4px !important;
  font-size: 10px !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .moveGrid,
body.chess3ResponsiveD7E.chess3PhoneD7E #legalMoveList {
  grid-template-columns: 1fr !important;
  max-height: 220px !important;
  overflow-y: auto !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .cloudD4AButtons,
body.chess3ResponsiveD7E.chess3PhoneD7E .manualCloudButtonsD7,
body.chess3ResponsiveD7E.chess3PhoneD7E .cloudButtons {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 8px !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .cloudD4ALabel,
body.chess3ResponsiveD7E.chess3PhoneD7E .manualCloudEndpointD7,
body.chess3ResponsiveD7E.chess3PhoneD7E input,
body.chess3ResponsiveD7E.chess3PhoneD7E textarea,
body.chess3ResponsiveD7E.chess3PhoneD7E pre,
body.chess3ResponsiveD7E.chess3PhoneD7E code,
body.chess3ResponsiveD7E.chess3PhoneD7E table,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3CloudQueueBoxD4A,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3ManualCloudBoxD7 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow-x: hidden !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .championTableWrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .champTable {
  min-width: 560px !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E h1 {
  font-size: 26px !important;
  line-height: 1.05 !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E h2 {
  font-size: 20px !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .subtitle,
body.chess3ResponsiveD7E.chess3PhoneD7E .smallNote {
  font-size: 12px !important;
}

/* Real small phones */
@media (max-width: 430px) {
  body.chess3ResponsiveD7E.chess3PhoneD7E .shell {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
  }

  body.chess3ResponsiveD7E.chess3PhoneD7E .cubeLiveControls,
  body.chess3ResponsiveD7E.chess3PhoneD7E .toolbar,
  body.chess3ResponsiveD7E.chess3PhoneD7E .controls {
    grid-template-columns: 1fr 1fr !important;
  }

  body.chess3ResponsiveD7E.chess3PhoneD7E h1 {
    font-size: 23px !important;
  }
}


/* Phase 6D7F - stable responsive layout lock */

body.chess3ResponsiveD7E::before,
body.chess3PhoneD7E::before,
body.chess3DesktopD7E::before,
body.chess3TabletD7E::before {
  content: none !important;
  display: none !important;
}

#mobileModeBtn {
  opacity: .78 !important;
  border-color: rgba(104,212,255,.35) !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .cubeLiveControls,
body.chess3ResponsiveD7E.chess3PhoneD7E .toolbar,
body.chess3ResponsiveD7E.chess3PhoneD7E .controls {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .shell {
  width: min(430px, calc(100vw - 12px)) !important;
  max-width: min(430px, calc(100vw - 12px)) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
  transform: none !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .rulebook,
body.chess3ResponsiveD7E.chess3PhoneD7E #rulebookPanel,
body.chess3ResponsiveD7E.chess3PhoneD7E .moveGrid,
body.chess3ResponsiveD7E.chess3PhoneD7E #legalMoveList,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3ManualCloudBoxD7,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3CloudQueueBoxD4A {
  overscroll-behavior: contain !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .chess3VisibleCloudBridgeD4A,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3ManualCloudSyncD7,
body.chess3ResponsiveD7E.chess3PhoneD7E .chess3ChampionBoard,
body.chess3ResponsiveD7E.chess3PhoneD7E #chess3ChampionBoard {
  contain: layout paint !important;
}

body.chess3ResponsiveD7E.chess3DesktopD7E .layout {
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/* Phase 6E3 - Live World Leaderboard UI */
.chess3WorldLeaderboardE1 {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 2px solid rgba(104,212,255,.62);
  background:
    radial-gradient(circle at top right, rgba(104,212,255,.15), transparent 35%),
    rgba(0,0,0,.30);
  box-shadow: 0 0 30px rgba(104,212,255,.12);
}

.chess3WorldLeaderboardE1::before {
  content: "6E3 LIVE WORLD LEADERBOARD - READ ONLY";
  display: block;
  margin-bottom: 9px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(104,212,255,.14);
  border: 1px solid rgba(104,212,255,.34);
  color: #68d4ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.worldHeaderE1 h2 {
  margin: 0 0 4px;
  color: #68d4ff;
}

.worldHeaderE1 p {
  margin: 0 0 12px;
  color: #dff8ff;
}

.worldChampionE1 {
  padding: 10px;
  border-radius: 12px;
  background: rgba(245,199,107,.12);
  border: 1px solid rgba(245,199,107,.28);
  margin-bottom: 10px;
  font-weight: 900;
  color: #fff6d8;
}

.worldButtonsE1 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.worldButtonsE1 button {
  min-height: 38px;
}

.worldStatusE1 {
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(104,212,255,.30);
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
}

.worldTableWrapE1 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(104,212,255,.18);
  margin-bottom: 10px;
}

.worldTableE1 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.worldTableE1 th,
.worldTableE1 td {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
}

.worldTableE1 th {
  color: #68d4ff;
  background: rgba(104,212,255,.08);
}

.worldRawE1 {
  width: 100%;
  min-height: 140px;
  border-radius: 12px;
  border: 1px solid rgba(104,212,255,.24);
  background: rgba(0,0,0,.30);
  color: #eefcf7;
  padding: 10px;
  font-family: Consolas, monospace;
  font-size: 12px;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .chess3WorldLeaderboardE1,
body.chess3ResponsiveD7E.chess3PhoneD7E .worldRawE1,
body.chess3ResponsiveD7E.chess3PhoneD7E .worldTableWrapE1 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .worldButtonsE1 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .worldButtonsE1 button {
  width: 100% !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .worldTableE1 {
  min-width: 420px;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .chess3WorldLeaderboardE1::before {
  text-align: center;
  white-space: normal;
  font-size: 10px;
}


/* Phase 6E3 - clean live leaderboard polish */
.chess3WorldLeaderboardE1 {
  border-color: rgba(94,240,165,.66) !important;
  box-shadow: 0 0 34px rgba(94,240,165,.14) !important;
}

.chess3WorldLeaderboardE1::before {
  content: "6E3 LIVE WORLD LEADERBOARD - READ ONLY" !important;
  color: #5ef0a5 !important;
  border-color: rgba(94,240,165,.38) !important;
  background: rgba(94,240,165,.14) !important;
}

.worldChampionE1 {
  font-size: 15px !important;
}

.worldStatusE1 {
  border-color: rgba(94,240,165,.30) !important;
}

.worldTableE1 th {
  color: #5ef0a5 !important;
  background: rgba(94,240,165,.08) !important;
}

body.chess3ResponsiveD7E.chess3PhoneD7E .chess3WorldLeaderboardE1::before {
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}


/* CHESS3_6E8_PUBLIC_POLISH */
.chess3PublicBanner6E8 {
  position: relative;
  z-index: 9999;
  margin: 10px auto 12px;
  max-width: 980px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(94,240,165,.38);
  background:
    radial-gradient(circle at top right, rgba(94,240,165,.14), transparent 38%),
    rgba(0,0,0,.44);
  color: #eefcf7;
  box-shadow: 0 0 28px rgba(94,240,165,.14);
  font-family: inherit;
  display: grid;
  gap: 4px;
}

.chess3PublicBanner6E8 strong {
  color: #5ef0a5;
  font-size: 15px;
}

.chess3PublicBanner6E8 span {
  font-size: 13px;
  line-height: 1.35;
}

.chess3Lab6E8 {
  color: #f5c76b;
  font-weight: 800;
}

.chess3PublicWriteLocked6E8,
.chess3PublicWriteLocked6E8:hover {
  opacity: .72 !important;
  cursor: not-allowed !important;
  filter: grayscale(.35) !important;
  background: rgba(120,120,120,.35) !important;
  border-color: rgba(255,255,255,.20) !important;
}

.chess3PublicManualNotice6E8 {
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(245,199,107,.35);
  background: rgba(245,199,107,.12);
  color: #fff6d8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.chess3PublicLeaderboard6E8 {
  position: relative;
}

@media (max-width: 720px) {
  .chess3PublicBanner6E8 {
    margin: 8px;
    padding: 11px;
    border-radius: 14px;
  }

  .chess3PublicBanner6E8 strong {
    font-size: 14px;
  }

  .chess3PublicBanner6E8 span {
    font-size: 12px;
  }
}


/* CHESS3_6E9_MOBILE_PUBLIC_LAYOUT_HARDENING */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

body.chess3MobilePublic6E9 {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body.chess3MobilePublic6E9 main,
body.chess3MobilePublic6E9 section,
body.chess3MobilePublic6E9 article,
body.chess3MobilePublic6E9 .app,
body.chess3MobilePublic6E9 .container,
body.chess3MobilePublic6E9 .shell,
body.chess3MobilePublic6E9 .panel {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.chess3MobilePublic6E9 img,
body.chess3MobilePublic6E9 svg,
body.chess3MobilePublic6E9 canvas,
body.chess3MobilePublic6E9 video {
  max-width: 100% !important;
}

body.chess3MobilePublic6E9 table {
  max-width: 100% !important;
}

body.chess3MobilePublic6E9 textarea,
body.chess3MobilePublic6E9 input,
body.chess3MobilePublic6E9 select {
  max-width: 100% !important;
}

.chess3MobileNotice6E9 {
  display: none;
}

body.chess3MobilePublic6E9 .chess3MobileNotice6E9 {
  display: grid !important;
  gap: 4px !important;
  margin: 8px auto 10px !important;
  width: calc(100% - 16px) !important;
  max-width: 980px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(104,212,255,.36) !important;
  background:
    radial-gradient(circle at top right, rgba(104,212,255,.13), transparent 36%),
    rgba(0,0,0,.42) !important;
  color: #eefcf7 !important;
  box-shadow: 0 0 24px rgba(104,212,255,.10) !important;
}

body.chess3MobilePublic6E9 .chess3MobileNotice6E9 strong {
  color: #68d4ff !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body.chess3MobilePublic6E9 .chess3MobileNotice6E9 span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.chess3MobilePublic6E9 button,
body.chess3MobilePublic6E9 .button,
body.chess3MobilePublic6E9 [role="button"] {
  min-height: 42px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  touch-action: manipulation !important;
}

body.chess3MobilePublic6E9 .chess3PossibleWideElement6E9 {
  max-width: 100% !important;
}

body.chess3MobilePublic6E9 .chess3WorldLeaderboardE1,
body.chess3MobilePublic6E9 .chess3LeaderboardMobileReady6E9 {
  width: calc(100% - 16px) !important;
  max-width: calc(100% - 16px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
}

body.chess3MobilePublic6E9 .worldTableWrapE1 {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.chess3MobilePublic6E9 .worldTableE1 {
  min-width: 390px !important;
  font-size: 12px !important;
}

body.chess3MobilePublic6E9 .worldTableE1 th,
body.chess3MobilePublic6E9 .worldTableE1 td {
  padding: 7px 6px !important;
}

body.chess3MobilePublic6E9 .worldRawE1 {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 110px !important;
  font-size: 11px !important;
}

body.chess3MobilePublic6E9 .worldButtonsE1 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body.chess3MobilePublic6E9 .worldButtonsE1 button {
  width: 100% !important;
}

body.chess3PhonePublic6E9 {
  font-size: 14px !important;
}

body.chess3PhonePublic6E9 .chess3PublicBanner6E8,
body.chess3PhonePublic6E9 .chess3MobileNotice6E9 {
  width: calc(100% - 12px) !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
  padding: 9px 10px !important;
}

body.chess3PhonePublic6E9 h1 {
  font-size: clamp(24px, 8vw, 34px) !important;
  line-height: 1.1 !important;
}

body.chess3PhonePublic6E9 h2 {
  font-size: clamp(20px, 7vw, 28px) !important;
  line-height: 1.15 !important;
}

body.chess3PhonePublic6E9 h3 {
  font-size: clamp(17px, 5.5vw, 22px) !important;
}

body.chess3PhonePublic6E9 p,
body.chess3PhonePublic6E9 li,
body.chess3PhonePublic6E9 div {
  overflow-wrap: anywhere;
}

body.chess3PhonePublic6E9 button {
  font-size: 14px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.chess3PhonePublic6E9 .worldChampionE1 {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

body.chess3PhonePublic6E9 .worldHeaderE1 p {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body.chess3LandscapePublic6E9 .chess3PublicBanner6E8,
body.chess3LandscapePublic6E9 .chess3MobileNotice6E9 {
  max-width: calc(100% - 20px) !important;
}

body.chess3LandscapePublic6E9 button {
  min-height: 38px !important;
}

body.chess3TabletFoldablePublic6E9 .chess3WorldLeaderboardE1,
body.chess3TabletFoldablePublic6E9 .chess3LeaderboardMobileReady6E9 {
  max-width: 720px !important;
}

body.chess3MobilePublic6E9 .chess3PublicWriteLocked6E9,
body.chess3MobilePublic6E9 .chess3PublicWriteLocked6E9:hover {
  opacity: .70 !important;
  cursor: not-allowed !important;
  filter: grayscale(.35) !important;
}

@media (max-width: 920px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main,
  section,
  article {
    max-width: 100% !important;
  }

  button {
    min-height: 42px !important;
    white-space: normal !important;
  }

  canvas,
  svg {
    max-width: 100% !important;
  }

  textarea {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 14px !important;
  }

  .worldTableE1 {
    min-width: 360px !important;
  }

  .worldRawE1 {
    min-height: 100px !important;
  }
}


/* CHESS3_6E10_PUBLIC_HEADER_LANDING_POLISH */
.chess3PublicHeader6E10 {
  width: min(1080px, calc(100% - 18px));
  margin: 10px auto 14px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(94,240,165,.36);
  background:
    radial-gradient(circle at top left, rgba(94,240,165,.18), transparent 30%),
    radial-gradient(circle at top right, rgba(104,212,255,.16), transparent 34%),
    rgba(0,0,0,.50);
  color: #eefcf7;
  box-shadow: 0 0 34px rgba(94,240,165,.13);
  display: grid;
  gap: 12px;
  overflow: hidden;
}

.chess3PublicBrand6E10 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chess3PublicMark6E10 {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245,199,107,.48);
  background:
    radial-gradient(circle at 30% 25%, rgba(245,199,107,.32), transparent 40%),
    rgba(94,240,165,.10);
  color: #f5c76b;
  font-weight: 950;
  font-size: 20px;
  box-shadow: 0 0 22px rgba(245,199,107,.12);
}

.chess3PublicBrand6E10 strong {
  display: block;
  color: #5ef0a5;
  font-size: clamp(18px, 3vw, 26px);
  line-height: 1.05;
}

.chess3PublicBrand6E10 span {
  display: block;
  margin-top: 4px;
  color: rgba(238,252,247,.82);
  font-size: 13px;
  line-height: 1.3;
}

.chess3PublicHero6E10 {
  display: grid;
  gap: 6px;
}

.chess3PublicHero6E10 h1 {
  margin: 0;
  color: #68d4ff;
  font-size: clamp(24px, 5vw, 46px);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.chess3PublicHero6E10 p {
  margin: 0;
  max-width: 880px;
  color: rgba(238,252,247,.86);
  font-size: clamp(13px, 2.2vw, 16px);
  line-height: 1.45;
}

.chess3PublicNav6E10 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chess3PublicNav6E10 button,
.chess3PublicNav6E10 a {
  appearance: none;
  text-decoration: none;
  border-radius: 14px;
  border: 1px solid rgba(94,240,165,.34);
  background: rgba(94,240,165,.12);
  color: #eefcf7;
  font-weight: 850;
  font-size: 14px;
  padding: 10px 12px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chess3PublicNav6E10 a {
  border-color: rgba(245,199,107,.38);
  background: rgba(245,199,107,.13);
  color: #fff6d8;
}

.chess3PublicStatus6E10 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chess3PublicStatus6E10 span {
  border-radius: 999px;
  border: 1px solid rgba(104,212,255,.24);
  background: rgba(104,212,255,.09);
  color: rgba(238,252,247,.88);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

body.chess3MobilePublic6E9 .chess3PublicHeader6E10,
body.chess3PhonePublic6E9 .chess3PublicHeader6E10 {
  width: calc(100% - 12px) !important;
  margin: 8px 6px 10px !important;
  padding: 11px !important;
  border-radius: 18px !important;
}

body.chess3PhonePublic6E9 .chess3PublicBrand6E10 {
  align-items: flex-start;
}

body.chess3PhonePublic6E9 .chess3PublicMark6E10 {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 15px;
  font-size: 17px;
}

body.chess3PhonePublic6E9 .chess3PublicNav6E10 {
  display: grid;
  grid-template-columns: 1fr;
}

body.chess3PhonePublic6E9 .chess3PublicNav6E10 button,
body.chess3PhonePublic6E9 .chess3PublicNav6E10 a {
  width: 100%;
}

body.chess3LandscapePublic6E9 .chess3PublicHeader6E10 {
  width: calc(100% - 20px) !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
}

body.chess3TabletFoldablePublic6E9 .chess3PublicHeader6E10 {
  max-width: 900px !important;
}

body.chess3Public6E10Ready .chess3PublicWriteLocked6E10,
body.chess3Public6E10Ready .chess3PublicWriteLocked6E10:hover {
  opacity: .70 !important;
  cursor: not-allowed !important;
  filter: grayscale(.35) !important;
}

@media (max-width: 520px) {
  .chess3PublicHeader6E10 {
    width: calc(100% - 12px) !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  .chess3PublicHero6E10 h1 {
    font-size: 25px !important;
  }

  .chess3PublicHero6E10 p {
    font-size: 13px !important;
  }
}