/* Home menu visual update: mirrors the public multi-room entry chrome. */
.home-header.legacy-home-header {
  width: min(92vw, 720px);
  min-height: 36px;
  margin: 0 auto clamp(8px, 1.8vh, 14px);
  padding: 0;
  overflow: hidden;
  background: #f3f3f3;
  border: 1px solid #c7c7c7;
  border-radius: 0;
  box-shadow: none;
}

/* Final room-entry placement: each seat button belongs beside its own board,
   while the narrow member list stays name-first and opens records on tap. */
@media (min-width: 901px) {
  .room-mode-shell .room-stage-board-p1 {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .room-mode-shell .room-stage-board-p2 {
    grid-column: 5;
    grid-row: 1 / -1;
  }

  .room-mode-shell .room-stage-board {
    grid-template-rows: 344px auto;
    height: 376px;
  }

  .room-mode-shell .room-stage-board .battle-board {
    width: 100%;
    height: 344px;
    grid-template-rows: 330px auto;
    justify-items: center;
  }

  .room-mode-shell .room-stage-board .room-stage-seat-button {
    width: 150px;
  }

  .room-mode-shell .room-member-row {
    grid-template-columns: minmax(0, 1fr);
    min-height: 36px;
    padding: 5px 6px;
  }

  .room-mode-shell .room-member-quality,
  .room-mode-shell .room-member-avatar {
    display: none;
  }
}

@media (max-width: 760px) {
  .room-mode-shell .room-original-sidebar .room-member-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .room-mode-shell .room-original-sidebar .room-member-quality,
  .room-mode-shell .room-original-sidebar .room-member-avatar {
    display: none;
  }
}

.home-header.legacy-home-header > .version,
.home-header.legacy-home-header > .home-header-actions {
  display: none;
}

.legacy-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.legacy-nav::-webkit-scrollbar { display: none; }

.legacy-nav button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px clamp(7px, 1.6vw, 14px);
  color: #2854a0;
  cursor: pointer;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  border: 0;
  border-right: 1px solid #9b9e9e;
  font: inherit;
  font-size: clamp(11px, 1.8vw, 14px);
  font-weight: 800;
}

.legacy-nav button:last-child { border-right: 0; }

.legacy-nav button:hover,
.legacy-nav button:focus-visible {
  color: #244525;
  outline: none;
  background: transparent;
}

.legacy-nav button.is-active {
  color: #244525;
  text-decoration: underline;
  background: transparent;
}

.legacy-info-modal {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: max(18px, calc((100vh - min(78vh, 620px)) / 2)) 18px 18px;
  background: #02050acc;
}

.legacy-info-card {
  width: min(92vw, 620px);
  height: auto;
  max-height: min(78vh, 620px);
  overflow: auto;
  padding: clamp(8px, 1.3vw, 10px) clamp(18px, 4vw, 30px) clamp(18px, 4vw, 30px);
  color: #303538;
  background: linear-gradient(145deg, #fff 0%, #f1f2f3 42%, #c8cbd0 100%);
  border: 1px solid #777c7f;
  border-radius: 7px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #898c8d, 0 8px 30px #0008;
}

.legacy-info-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.legacy-info-kicker {
  margin: 0;
  color: #5b6366;
  letter-spacing: .18em;
  font-size: 10px;
  font-weight: 900;
}

.legacy-info-card h2 {
  margin: 0 0 18px;
  color: #4c5155;
  font-size: clamp(22px, 5vw, 34px);
  text-shadow: 0 1px #fff, 0 2px #a0a3a5, 0 4px 7px #0003;
}

.legacy-rotation-reference {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 0 12px;
  padding: 7px 0;
  background: linear-gradient(145deg, #fff 0%, #f1f2f3 42%, #c8cbd0 100%);
  border-bottom: 1px solid #92979a;
  box-shadow: 0 3px 6px #0002;
}

.legacy-rotation-reference-grid {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.legacy-rotation-reference-grid::-webkit-scrollbar { display: none; }

.legacy-rotation-reference-item {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  min-height: 66px;
  height: auto;
  margin: 0;
  padding: 2px;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: #303845;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
}

.legacy-rotation-reference-item:hover,
.legacy-rotation-reference-item:focus-visible {
  outline: none;
  background: #eaffdf;
  border-color: #6c9c65;
  box-shadow: inset 0 0 0 1px #fff;
}

.legacy-rotation-reference-item img {
  width: 46px;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.legacy-rotation-reference-label {
  color: #303845;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.rotation-board-editor-link {
  display: block;
  margin: 0 0 12px;
  padding: 9px 12px;
  color: #244525;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(#f5fff0, #d9f0d1 52%, #aed7a4);
  border: 1px solid #6c9c65;
  border-radius: 6px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #8eb987, 0 1px #777a7b;
  font-size: 11px;
  font-weight: 900;
}

.rotation-board-editor-link:hover,
.rotation-board-editor-link:focus-visible {
  color: #173919;
  outline: none;
  filter: brightness(1.04);
}

.rotation-simulator {
  margin: 0 0 12px;
  padding: 10px;
  color: #303845;
  background: #ffffffb8;
  border: 1px solid #92979a;
  border-radius: 6px;
  box-shadow: inset 1px 1px #fff8, inset -1px -1px #a6aaad;
}

.rotation-simulator-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.rotation-simulator-kicker {
  margin: 0;
  color: #596268;
  letter-spacing: .16em;
  font-size: 8px;
  font-weight: 900;
}

.rotation-simulator h3 {
  margin: 2px 0 0;
  color: #4c5155;
  font-size: 16px;
}

.rotation-simulator-lead {
  margin: 5px 0 8px;
  color: #4c555a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.rotation-simulator-export,
.rotation-simulator-action-grid button {
  color: #303538;
  cursor: pointer;
  background: linear-gradient(#fff, #e0e2e2 52%, #bec2c2);
  border: 1px solid #777c7f;
  border-radius: 4px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #898c8d, 0 1px #777a7b;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
}

.rotation-simulator-export {
  flex: 0 0 auto;
  padding: 6px 8px;
}

.rotation-simulator-export:hover,
.rotation-simulator-export:focus-visible,
.rotation-simulator-action-grid button:hover,
.rotation-simulator-action-grid button:focus-visible {
  color: #244525;
  outline: none;
  background: linear-gradient(#f4fff0, #d6efcf 52%, #aed9a5);
  border-color: #7fbd76;
}

.rotation-simulator-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}

.rotation-simulator-palette-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 3px 6px;
  color: #3a4145;
  cursor: pointer;
  background: #f1f2f2;
  border: 1px solid #a0a5a7;
  border-radius: 3px;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
}

.rotation-simulator-palette-button.is-selected {
  color: #244525;
  background: #dff5d9;
  border-color: #6c9c65;
  box-shadow: inset 0 0 0 1px #fff;
}

.rotation-simulator-swatch {
  display: inline-block;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  background: var(--rotation-simulator-color, #8d8d8d);
  border: 1px solid #4c555a;
  box-shadow: inset 1px 1px #fff8, inset -1px -1px #0005;
}

.rotation-simulator-palette-button.cell-value-0 .rotation-simulator-swatch {
  background: repeating-linear-gradient(135deg, #fff 0 2px, #b9bec0 2px 3px);
}

.rotation-simulator-palette-button.cell-value-1,
.rotation-simulator-cell.cell-value-1 { --rotation-simulator-color: #c90300; }
.rotation-simulator-palette-button.cell-value-2,
.rotation-simulator-cell.cell-value-2 { --rotation-simulator-color: #00af14; }
.rotation-simulator-palette-button.cell-value-3,
.rotation-simulator-cell.cell-value-3 { --rotation-simulator-color: #c238df; }
.rotation-simulator-palette-button.cell-value-4,
.rotation-simulator-cell.cell-value-4 { --rotation-simulator-color: #d3b42c; }
.rotation-simulator-palette-button.cell-value-5,
.rotation-simulator-cell.cell-value-5 { --rotation-simulator-color: #03a1e6; }
.rotation-simulator-palette-button.cell-value-6,
.rotation-simulator-cell.cell-value-6 { --rotation-simulator-color: #da8744; }
.rotation-simulator-palette-button.cell-value-7,
.rotation-simulator-cell.cell-value-7 { --rotation-simulator-color: #0035ed; }
.rotation-simulator-palette-button.cell-value-8,
.rotation-simulator-cell.cell-value-8 { --rotation-simulator-color: #8d8d8d; }

.rotation-simulator-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: 10px;
  align-items: start;
}

.rotation-simulator-board {
  display: grid;
  grid-template-columns: repeat(10, minmax(12px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  width: min(100%, 260px);
  aspect-ratio: 10 / 24;
  margin: 0 auto;
  padding: 3px;
  background: #06101c;
  border: 1px solid #526b80;
  box-shadow: inset 0 0 0 1px #000, 0 2px 5px #0004;
  touch-action: none;
}

.rotation-simulator-cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  cursor: crosshair;
  background: #06101c;
  border: 1px solid #29445d;
  box-shadow: inset 0 0 0 1px #0005;
}

.rotation-simulator-cell.cell-value-1,
.rotation-simulator-cell.cell-value-2,
.rotation-simulator-cell.cell-value-3,
.rotation-simulator-cell.cell-value-4,
.rotation-simulator-cell.cell-value-5,
.rotation-simulator-cell.cell-value-6,
.rotation-simulator-cell.cell-value-7,
.rotation-simulator-cell.cell-value-8 {
  background: var(--rotation-simulator-color);
  box-shadow: inset 2px 2px #fff8, inset -2px -2px #0006;
}

.rotation-simulator-cell.is-active-piece {
  z-index: 1;
  background: color-mix(in srgb, var(--rotation-simulator-color) 82%, white);
  outline: 2px solid #fff;
  outline-offset: -3px;
}

.rotation-simulator-cell.is-active-piece.is-invalid {
  background: #df5757;
  outline-color: #ffb1b1;
}

.rotation-simulator-controls {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.rotation-simulator-controls label {
  display: grid;
  gap: 3px;
  color: #4c555a;
  font-size: 9px;
  font-weight: 900;
}

.rotation-simulator-controls select,
.rotation-simulator-controls input {
  box-sizing: border-box;
  width: 100%;
  min-height: 26px;
  padding: 3px 5px;
  color: #303538;
  background: #fff;
  border: 1px solid #92979a;
  border-radius: 3px;
  font: inherit;
  font-size: 10px;
}

.rotation-simulator-number-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.rotation-simulator-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.rotation-simulator-action-grid button {
  min-height: 28px;
  padding: 4px;
}

.rotation-simulator-action-grid button.is-wide {
  grid-column: 1 / -1;
}

.rotation-simulator-action-grid button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.rotation-simulator-validity,
.rotation-simulator-message,
.rotation-simulator-history {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.rotation-simulator-validity.is-valid { color: #26723a; }
.rotation-simulator-validity.is-invalid { color: #a23d3d; }
.rotation-simulator-message { color: #4c555a; }
.rotation-simulator-history { color: #596268; word-break: break-word; }

@media (max-width: 560px) {
  .rotation-simulator-workspace {
    grid-template-columns: 1fr;
  }

  .rotation-simulator-board {
    width: min(100%, 250px);
  }
}

.legacy-info-body {
  padding: 12px 14px;
  color: #303845;
  background: #ffffff99;
  border: 1px solid #92979a;
}

.legacy-info-body p {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid #b2b5b6;
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 700;
  line-height: 1.6;
}

.legacy-info-body .legacy-rotation-theory {
  margin: 0 0 12px;
  padding: 0 0 6px;
}

.legacy-rotation-theory h3 {
  margin: 0 0 8px;
  color: #4c5155;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}

.legacy-info-body .legacy-rotation-theory p {
  margin: 0;
  padding: 2px 0;
  border-bottom: 0;
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 700;
  line-height: 1.6;
}

.legacy-info-body p:last-child { border-bottom: 0; }
.legacy-info-body p[id] { scroll-margin-top: 82px; }

.legacy-info-body p.legacy-rotation-explanation {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.legacy-rotation-explanation img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #fff;
  border: 1px solid #b7bbbd;
}

.legacy-info-body p.legacy-rotation-technique {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.legacy-rotation-technique-gif {
  width: 92px;
  height: 112px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #fff;
  border: 1px solid #b7bbbd;
}

.legacy-info-close {
  display: grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  place-items: center;
  color: #303538;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(#fff, #d4d6d6 50%, #b8bbba);
  border: 1px solid #777c7f;
  border-radius: 5px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #898c8d, 0 1px #777a7b;
}

.legacy-info-close:hover,
.legacy-info-close:focus-visible {
  color: #244525;
  outline: none;
  background: linear-gradient(#f4fff0, #d6efcf 48%, #aed9a5);
}

.home-panel {
  background: linear-gradient(145deg, #ffffff 0%, #f7f8fa 22%, #e2e4e8 64%, #c8cbd1 100%);
}

.home-panel .brand-title {
  color: #4c5155;
  letter-spacing: -.04em;
  text-shadow: 0 1px #fff, 0 2px #a0a3a5, 0 5px 9px #0003;
  font-size: clamp(24px, 5.2vw, 38px);
  line-height: .93;
}

.home-panel .home-tagline {
  letter-spacing: -.04em;
  white-space: normal;
  font-size: clamp(18px, 4.2vw, 32px);
  line-height: 1.08;
}

.home-panel .mode-card {
  color: #303538;
  letter-spacing: .08em;
  text-shadow: 0 1px #fff;
  background: linear-gradient(#fff 0%, #e2e3e1 48%, #b9bbba 100%);
  border: 1px solid #777c7f;
  border-radius: 3px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #898c8d, 0 2px #777a7b;
}

.home-panel .mode-card:hover,
.home-panel .mode-card:focus-visible {
  color: #244525;
  background: linear-gradient(#f4fff0 0%, #d6efcf 48%, #aed9a5 100%);
  border-color: #7fbd76;
  filter: none;
  transform: translateY(-1px);
}

.home-panel .mode-card:active {
  transform: translateY(2px);
  box-shadow: inset 2px 2px 4px #565961, 0 1px #25272c;
}

.home-panel .mode-icon {
  box-sizing: border-box;
  display: grid;
  position: relative;
  place-self: center;
  place-items: center;
  color: #e3e8e8;
  background: #4d565b;
  border: 1px solid #7b8589;
  box-shadow: inset 1px 1px #ffffff7a, inset -1px -1px #273034, 0 0 5px #69767a;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-shadow: none;
}

.home-panel .mode-icon::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  transform: translate(1px, 1px);
}

.home-panel .mode-card:nth-child(1) .mode-icon::before { content: "◎"; }
.home-panel .mode-card:nth-child(2) .mode-icon::before { content: "◆"; }
.home-panel .mode-card:nth-child(3) .mode-icon::before { content: "◇"; }
.home-panel .mode-card:nth-child(4) .mode-icon::before { content: "▦"; }
.home-panel .mode-card:nth-child(5) .mode-icon::before { content: "✦"; }
.home-panel .mode-card:nth-child(6) .mode-icon::before { content: "★"; }

.home-panel .mode-card:hover .mode-icon,
.home-panel .mode-card:focus-visible .mode-icon {
  color: #d8f4d0;
  background: #4f7651;
  border-color: #7fbd76;
  box-shadow: 0 0 8px #7fbd76;
}

.home-panel .mode-arrow {
  color: #555d61;
}

.home-panel .mode-card:hover .mode-arrow,
.home-panel .mode-card:focus-visible .mode-arrow {
  color: #244525;
}

/* Keep the home screen in one readable column on phone landscape screens.
   The base layout intentionally uses two columns for wider landscape views,
   but that leaves the home panel pushed off-center in mobile Safari. */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 900px) {
  .home-shell {
    height: auto;
    min-height: 100svh;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    gap: 8px;
    padding: max(var(--safe-top), 8px) max(var(--safe-right), 10px) max(var(--safe-bottom), 8px) max(var(--safe-left), 10px);
    overflow-y: auto;
  }

  .home-shell .home-header {
    grid-column: 1;
    width: min(100%, 720px);
  }

  .home-shell .home-panel {
    grid-area: 2 / 1;
    width: min(100%, 620px);
    max-height: none;
    padding: 14px 18px 18px;
  }

  .home-shell > .ad-slot,
  .home-shell > .home-footnote {
    grid-column: 1;
  }

  .home-shell > .ad-slot { grid-row: 3; }
  .home-shell > .home-footnote { grid-row: 4; }
}

/* Full-screen touch layout editor. The compact preview remains in the DOM
   for compatibility, but the real editor uses the same viewport proportions
   as the game and keeps portrait/landscape layouts separate. */
.touch-layout-editor {
  cursor: pointer;
}

.touch-layout-editor:focus-visible {
  outline: 2px solid #7fbd76;
  outline-offset: 3px;
}

.bwf-touch-layout-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  overflow: hidden;
  color: #eff7ff;
  background: #02050a;
  touch-action: none;
}

.bwf-touch-layout-overlay:before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(at 50% 62%, #2c96ff33 0 3%, #0000 34%),
    repeating-linear-gradient(113deg, #0000 0 34px, #1065d82e 36px 38px, #0000 40px 78px),
    linear-gradient(90deg, #010207 0%, #07111e 38%, #06101c 62%, #010207 100%);
}

.bwf-touch-layout-dialog {
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  min-height: 100%;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.bwf-touch-layout-head,
.bwf-touch-layout-toolbar,
.bwf-touch-layout-actions {
  width: min(100%, 980px);
  margin-inline: auto;
}

.bwf-touch-layout-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.bwf-touch-layout-head h1 {
  margin: 2px 0 0;
  color: #f8fbff;
  letter-spacing: .04em;
  font-size: clamp(18px, 3.8vw, 30px);
}

.bwf-touch-layout-kicker {
  margin: 0;
  color: #71dfff;
  letter-spacing: .18em;
  font-size: 9px;
  font-weight: 900;
}

.bwf-touch-layout-lead {
  margin: 4px 0 0;
  color: #b8c7d9;
  font-size: 10px;
  font-weight: 700;
}

.bwf-touch-layout-close {
  color: #e5f2ff;
  cursor: pointer;
  background: #0a192be6;
  border: 1px solid #71859b;
  border-radius: 3px;
  min-width: 40px;
  min-height: 36px;
  font-size: 22px;
  line-height: 1;
}

.bwf-touch-layout-close:hover,
.bwf-touch-layout-close:focus-visible {
  color: #d6efcf;
  outline: none;
  border-color: #7fbd76;
}

.bwf-touch-layout-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  background: #020810c7;
  border: 1px solid #97b8d457;
  border-radius: 4px;
}

.bwf-touch-layout-tabs {
  display: flex;
  gap: 6px;
}

.bwf-touch-layout-tab {
  color: #b8c7d9;
  cursor: pointer;
  background: transparent;
  border: 1px solid #55708e;
  border-radius: 2px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
}

.bwf-touch-layout-tab.is-selected,
.bwf-touch-layout-tab:hover,
.bwf-touch-layout-tab:focus-visible {
  color: #d6efcf;
  outline: none;
  background: #4f7651;
  border-color: #7fbd76;
}

.bwf-touch-layout-orientation-note {
  color: #8195ac;
  text-align: right;
  font-size: 9px;
  font-weight: 700;
}

.bwf-touch-layout-stage-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}

.bwf-touch-layout-stage {
  position: relative;
  width: min(92vw, 900px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(circle at 50% 63%, #0f2b43 0%, #030a12 46%, #010207 100%);
  border: 1px solid #8ea6bb;
  border-radius: 4px;
  box-shadow: 0 14px 50px #000, inset 0 0 34px #2f97ff1c;
  touch-action: none;
}

.bwf-touch-layout-stage.is-portrait {
  width: min(42vw, 330px);
  aspect-ratio: 9 / 16;
}

.bwf-touch-layout-stage:before,
.bwf-touch-layout-stage:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -20%;
}

.bwf-touch-layout-stage:before {
  background: repeating-linear-gradient(90deg, #0000 0 46px, #1c69e157 48px 50px),
    repeating-linear-gradient(0deg, #0000 0 26px, #53cdff2e 28px 30px);
  opacity: .46;
  transform: perspective(420px) rotateX(68deg) translateY(25%);
}

.bwf-touch-layout-stage:after {
  background: linear-gradient(90deg, #000000b8, #0000 19% 81%, #000000b8);
}

.bwf-touch-layout-board,
.bwf-touch-layout-next,
.bwf-touch-layout-status,
.bwf-touch-layout-label {
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.bwf-touch-layout-board {
  top: 10%;
  left: 12%;
  width: 34%;
  height: 74%;
  border: 3px solid #e5edf6;
  box-shadow: inset 0 0 0 3px #252d37, 0 0 0 1px #586d81, 0 0 18px #b3d0eb4d;
}

.bwf-touch-layout-stage.is-portrait .bwf-touch-layout-board {
  top: 9%;
  left: 17%;
  width: 57%;
  height: 68%;
}

.bwf-touch-layout-next {
  top: 14%;
  right: 12%;
  width: 16%;
  height: 15%;
  border: 1px solid #97b8d4;
  background: #020810a8;
}

.bwf-touch-layout-next:after {
  content: "NEXT";
  position: absolute;
  top: -14px;
  left: 0;
  color: #b9cde0;
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 900;
}

.bwf-touch-layout-status {
  right: 12%;
  bottom: 10%;
  color: #b9cde0;
  letter-spacing: .16em;
  font-size: 8px;
  font-weight: 900;
}

.bwf-touch-layout-label {
  left: 14%;
  bottom: 4%;
  color: #39d8ff;
  letter-spacing: .2em;
  font-size: 8px;
  font-weight: 900;
}

.bwf-touch-layout-control {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(44px, 8vw, 74px);
  aspect-ratio: 1;
  padding: 4px;
  color: #e7f7ff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: #164979b8;
  border: 2px solid #65cfff;
  border-radius: 50%;
  box-shadow: 0 0 16px #39d8ff59, inset 0 0 14px #39d8ff2e;
  transform: translate(-50%, -50%);
}

.bwf-touch-layout-control:active,
.bwf-touch-layout-control.is-dragging {
  color: #d6efcf;
  cursor: grabbing;
  background: #4f7651d9;
  border-color: #b7e7a9;
  box-shadow: 0 0 0 3px #7fbd7655, 0 0 18px #7fbd76;
}

.bwf-touch-layout-control span {
  font-size: clamp(18px, 4vw, 30px);
  line-height: 1;
}

.bwf-touch-layout-control small {
  position: absolute;
  bottom: -16px;
  color: #b9cde0;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 900;
}

.bwf-touch-layout-control[data-control="softDrop"] {
  border-radius: 12px;
}

@media (orientation: portrait) and (max-width: 560px) {
  .bwf-touch-layout-stage.is-portrait .bwf-touch-layout-control {
    width: 38px;
  }
}

.bwf-touch-layout-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bwf-touch-layout-actions button {
  min-height: 40px;
  padding: 0 14px;
}

.bwf-touch-layout-reset-action {
  margin-right: auto;
}

@media (max-height: 520px) {
  .bwf-touch-layout-dialog { gap: 6px; }
  .bwf-touch-layout-head h1 { font-size: 18px; }
  .bwf-touch-layout-lead { display: none; }
  .bwf-touch-layout-stage { width: min(84vw, 760px); }
  .bwf-touch-layout-stage.is-portrait { width: min(24vw, 190px); }
  .bwf-touch-layout-control { width: clamp(38px, 8vh, 58px); }
  .bwf-touch-layout-toolbar { padding-block: 4px; }
  .bwf-touch-layout-actions button { min-height: 34px; }
}

@media (orientation: portrait) and (max-width: 560px) {
  .bwf-touch-layout-toolbar { align-items: stretch; flex-direction: column; }
  .bwf-touch-layout-tabs { justify-content: center; }
  .bwf-touch-layout-orientation-note { text-align: center; }
  .bwf-touch-layout-stage { width: min(94vw, 500px); }
  .bwf-touch-layout-stage.is-portrait { width: min(58vw, 350px); }
}

/* Desktop matches use the original wide-screen board scale while keeping the
   board inside the match area. The 10:24 playfield proportion comes from the
   board itself; height is capped so the status strip and controls stay clear. */
@media (min-width: 901px) {
  .match-shell .arena .battle-board {
    width: 100%;
  }

  .match-shell .arena .board-bevel {
    width: auto;
    height: min(calc(var(--app-viewport-height) - 170px), 72dvh);
  }
}

/* Keep the same inner-side preview relationship on compact landscape phones,
   while preserving their existing small-board layout. */
@media (orientation: landscape) and (min-width: 761px) and (max-width: 900px) {
  .match-shell .arena .versus-column,
  .match-shell .arena .arena-next-row {
    overflow: visible;
  }

  .match-shell .arena .arena-next-row > .next-panel:first-child {
    position: relative;
    left: clamp(-150px, -16vw, -120px);
  }

  .match-shell .arena .arena-next-row > .next-panel:last-child {
    position: relative;
    left: clamp(120px, 16vw, 150px);
  }
}

/* Desktop room/match canvas: keep the compact fixed-width composition of the
   original SWF, with the room panel and chat sharing the same canvas. */
@media (min-width: 901px) {
  .room-mode-shell {
    padding: 10px;
  }

  .room-mode-shell .room-mode-header {
    display: none;
  }

  .room-mode-shell .room-original-layout {
    width: min(calc(100vw - 20px), 748px);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) 148px;
    grid-template-rows: 376px auto;
    column-gap: 10px;
    row-gap: 4px;
  }

  .room-mode-shell .room-original-player-row {
    margin-top: -16px;
    margin-bottom: 0;
  }

  .room-mode-shell .room-original-stage {
    width: 100%;
    height: 360px;
    min-height: 360px;
    padding: 8px 10px;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 78px 58px 78px minmax(0, 1fr);
    grid-template-rows: 76px 46px minmax(0, 1fr);
    row-gap: 8px;
  }

  .room-mode-shell .room-original-stage > .battle-board {
    width: 100%;
    height: 344px;
    align-self: start;
    grid-template-rows: 330px auto;
    justify-items: center;
  }

  .room-mode-shell .room-original-stage > .battle-board:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .room-mode-shell .room-original-stage > .battle-board:last-child {
    grid-column: 5;
    grid-row: 1 / -1;
  }

  .room-mode-shell .room-original-stage .board-bevel {
    width: 150px;
    height: 330px;
  }

  .room-mode-shell .room-original-sidebar {
    width: 148px;
    height: 376px;
    padding: 8px;
    overflow: auto;
  }

  .room-mode-shell .room-original-chat {
    grid-column: 1 / -1;
    min-height: 180px;
    height: 180px;
  }

  .cpu-match-stage .match-shell {
    padding-top: 14px !important;
  }

  .match-shell {
    padding-bottom: 10px;
    grid-template-rows: calc(var(--app-viewport-height) - 84px) 36px 0;
  }

  .match-shell .arena {
    width: min(100%, 712px);
    height: 100%;
    margin: 0 auto;
    grid-template-columns: 228px 78px 24px 78px 228px;
    grid-template-rows: 20px 80px 84px 51px 12px minmax(0, 1fr);
    column-gap: 19px;
    row-gap: 0;
    align-items: stretch;
    align-content: stretch;
  }

  .match-shell .arena > .arena-board-slot:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .match-shell .arena > .arena-board-slot:last-child {
    grid-column: 5;
    grid-row: 1 / -1;
  }

  .match-shell .arena > .arena-board-slot .battle-board {
    width: 100%;
    height: 507px;
    grid-template-rows: 490px auto;
    align-self: start;
    justify-items: center;
  }

  .match-shell .arena > .arena-board-slot .board-bevel {
    width: 228px;
    height: 490px;
  }

  .match-shell .arena > .versus-column {
    display: contents;
  }

  .match-shell .arena > .versus-column > .arena-next-row {
    display: contents;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel {
    grid-row: 2;
    align-self: start !important;
    justify-self: stretch;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    width: 100%;
    margin: 0;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel:first-child {
    grid-column: 2;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel:last-child {
    grid-column: 4;
  }

  .match-shell .arena > .versus-column > .metrics {
    grid-column: 2 / 5;
    grid-row: 3;
    width: 100%;
    height: 84px;
    align-self: start;
    grid-template-columns: 78px 24px 78px;
    grid-template-rows: 42px 42px;
    gap: 0;
  }

  .match-shell .arena > .versus-column > .metrics > .metric:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .match-shell .arena > .versus-column > .metrics > .metric:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }

  .match-shell .arena > .versus-column > .metrics > .metric:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .match-shell .arena > .versus-column > .metrics > .metric:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  .match-shell .arena > .versus-column > .vs-mark {
    grid-column: 2 / 5;
    grid-row: 4;
    width: 100%;
    align-self: start;
  }

  .match-shell .arena > .versus-column > .connection-status {
    grid-column: 2 / 5;
    grid-row: 5;
  }

  .match-shell .match-status-strip {
    width: min(100%, 574px);
    margin-inline: auto;
  }
}

/* Final compact room sidebar: the original lobby uses a narrow member list,
   so keep each entry single-line and leave the room controls visible. */
@media (min-width: 901px) {
  .room-mode-shell .room-local-record {
    display: none;
  }

  .room-mode-shell .room-original-sidebar {
    overflow: hidden;
  }

  .room-mode-shell .room-member-list {
    height: 99px;
    max-height: none;
    gap: 3px;
    overflow: hidden;
  }

  .room-mode-shell .room-member-row {
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 4px;
    height: 27px;
    min-height: 27px;
    padding: 3px;
    overflow: hidden;
  }

  .room-mode-shell .room-member-avatar {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .room-mode-shell .room-member-copy {
    min-width: 0;
    gap: 1px;
    line-height: 1.1;
  }

  .room-mode-shell .room-member-copy strong {
    font-size: 9px;
  }

  .room-mode-shell .room-member-copy small {
    overflow: hidden;
    font-size: 7px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-mode-shell .room-member-quality {
    display: none;
  }

  .room-mode-shell .room-seat-grid {
    margin-top: 8px;
  }

  .room-mode-shell .room-seat-button {
    min-height: 44px;
    padding: 4px;
    font-size: 10px;
  }

  .room-mode-shell .room-lobby-controls {
    margin-top: 8px;
  }

  .room-mode-shell .room-lobby-hint {
    font-size: 8px;
    line-height: 1.25;
  }
}

/* Waiting-room staging follows the original: previews at the board top,
   scores/status immediately below, with the P1/P2 seat controls kept together
   in the room-side operation panel. */
@media (min-width: 761px) {
  .room-original-stage {
    align-items: start;
  }

  .room-original-center {
    align-self: start;
    align-content: start;
    padding-top: 0;
    padding-bottom: 0;
  }

  .room-original-sidebar .room-seat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
  }

  .room-original-sidebar .room-seat-button {
    min-height: 44px;
    color: #1d2a38;
    background: linear-gradient(#f7f8fb 0%, #c8cbd1 48%, #9a9da5 52%, #e5e7eb 100%);
    border-color: #5b626d;
    box-shadow: inset 1px 1px #fff, inset -2px -2px #686c74, 0 2px #25272c;
  }

  .room-original-sidebar .room-seat-button:hover,
  .room-original-sidebar .room-seat-button:focus-visible {
    color: #174f2c;
    background: #b8ffb8;
    border-color: #3c7e4d;
    outline: none;
  }
}

/* Active matches use the original inner-side NEXT positions as well: the
   boards stay wide, each preview sits beside its own board, and the center
   remains available for the score / VS area. */
@media (min-width: 901px) {
  .room-mode-shell .room-original-stage {
    align-items: start;
  }

  .match-shell .arena {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(68px, 7vw, 88px)
      minmax(150px, 180px)
      clamp(68px, 7vw, 88px)
      minmax(0, 1fr);
    grid-template-rows: 42px 80px 126px 51px 12px minmax(0, 1fr);
    column-gap: clamp(4px, .8vw, 10px);
    align-items: stretch;
    align-content: stretch;
  }

  .match-shell .arena > .arena-board-slot:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .match-shell .arena > .arena-board-slot:last-child {
    grid-column: 5;
    grid-row: 1 / -1;
  }

  .match-shell .arena > .arena-board-slot:first-child .battle-board {
    justify-items: end;
  }

  .match-shell .arena > .arena-board-slot:last-child .battle-board {
    justify-items: start;
  }

  .match-shell .arena > .versus-column {
    display: contents;
  }

  .match-shell .arena > .versus-column > .arena-next-row {
    display: contents;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel {
    grid-row: 2;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    width: 100%;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel:first-child {
    grid-column: 2;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel:last-child {
    grid-column: 4;
  }

  .match-shell .arena > .versus-column > .metrics {
    grid-column: 3;
    grid-row: 3;
    width: 100%;
  }

  .match-shell .arena > .versus-column > .vs-mark {
    grid-column: 3;
    grid-row: 4;
    width: 100%;
  }

  .match-shell .arena > .versus-column > .connection-status {
    grid-column: 3;
    grid-row: 5;
  }
}

/* Original battle staging: board / P1 NEXT / FIGHT / P2 NEXT / board. */
@media (min-width: 761px) {
  .room-original-stage {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(72px, 7vw, 88px)
      clamp(56px, 5vw, 72px)
      clamp(72px, 7vw, 88px)
      minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .room-original-stage > .battle-board:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .room-original-stage > .battle-board:last-child {
    grid-column: 5;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .room-original-stage > .room-original-center {
    display: contents;
  }

  .room-original-stage > .room-original-center > .room-original-next-row {
    display: contents;
  }

  .room-original-stage > .room-original-center > .room-original-next-row > .next-panel {
    grid-row: 1;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: 3px;
    width: 100%;
  }

  .room-original-stage > .room-original-center > .room-original-next-row > .next-panel:first-child {
    grid-column: 2;
  }

  .room-original-stage > .room-original-center > .room-original-next-row > .next-panel:last-child {
    grid-column: 4;
  }

  .room-original-stage > .room-original-center > .room-original-next-row > .room-original-vs {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
  }

  .room-original-stage > .room-original-center > .room-original-score-row {
    grid-column: 2 / 5;
    grid-row: 2;
    align-self: start;
    width: 100%;
    margin-top: 4px;
  }

  .room-original-stage > .room-original-center > .room-original-seat-row {
    grid-column: 2 / 5;
    grid-row: 3;
    align-self: end;
    justify-self: center;
    width: min(100%, 230px);
    margin-bottom: 5px;
  }

  .room-original-stage > .room-original-center > .room-original-stage-status {
    display: none;
  }
}

/* Final desktop ordering override: keep this after the legacy staging rules
   so the compact original-sized match canvas wins in the cascade. */
@media (min-width: 901px) {
  .match-shell .arena {
    width: min(100%, 712px);
    height: 100%;
    margin: 0 auto;
    grid-template-columns: 228px 78px 24px 78px 228px;
    grid-template-rows: 20px 80px 84px 51px 12px minmax(0, 1fr);
    column-gap: 19px;
    row-gap: 0;
  }

  /* Room lobby entry buttons sit under their corresponding board. */
  .room-mode-shell .room-stage-board-p1 {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .room-mode-shell .room-stage-board-p2 {
    grid-column: 5;
    grid-row: 1 / -1;
  }

  .room-mode-shell .room-stage-board {
    grid-template-rows: 344px auto;
    height: 376px;
  }

  .room-mode-shell .room-stage-board .battle-board {
    width: 100%;
    height: 344px;
    grid-template-rows: 330px auto;
    justify-items: center;
  }

  .room-mode-shell .room-stage-board .room-stage-seat-button {
    width: 150px;
    margin-top: 0;
  }

  .room-mode-shell .room-member-row {
    grid-template-columns: minmax(0, 1fr);
    min-height: 36px;
    padding: 5px 6px;
  }

  .room-mode-shell .room-member-quality,
  .room-mode-shell .room-member-avatar {
    display: none;
  }

  .match-shell .arena > .arena-board-slot:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .match-shell .arena > .arena-board-slot:last-child {
    grid-column: 5;
    grid-row: 1 / -1;
  }

  .match-shell .arena > .arena-board-slot .battle-board {
    width: 100%;
    height: 507px;
    grid-template-rows: 490px auto;
    align-self: start;
    justify-items: center;
  }

  .match-shell .arena > .arena-board-slot .board-bevel {
    width: 228px;
    height: 490px;
  }

  .match-shell .arena > .versus-column,
  .match-shell .arena > .versus-column > .arena-next-row {
    display: contents;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel {
    grid-row: 2;
    align-self: start !important;
    justify-self: stretch;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    width: 100%;
    margin: 0;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel:first-child {
    grid-column: 2;
  }

  .match-shell .arena > .versus-column > .arena-next-row > .next-panel:last-child {
    grid-column: 4;
  }

  .match-shell .arena > .versus-column > .metrics {
    grid-column: 2 / 5;
    grid-row: 3;
    width: 100%;
    height: 84px;
    align-self: start;
    grid-template-columns: 78px 24px 78px;
    grid-template-rows: 42px 42px;
    gap: 0;
  }

  .match-shell .arena > .versus-column > .metrics > .metric:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .match-shell .arena > .versus-column > .metrics > .metric:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }

  .match-shell .arena > .versus-column > .metrics > .metric:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .match-shell .arena > .versus-column > .metrics > .metric:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  .match-shell .arena > .versus-column > .vs-mark {
    grid-column: 2 / 5;
    grid-row: 4;
    width: 100%;
    align-self: start;
  }

  .match-shell .arena > .versus-column > .connection-status {
    grid-column: 2 / 5;
    grid-row: 5;
  }

  .match-shell .match-status-strip {
    width: min(100%, 574px);
    margin-inline: auto;
  }
}