/* Presentation only. Shared by the center and room; no game-state changes. */
:root {
  color-scheme: dark;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #dde3e8;
  background: #090c0e;
  --line: #35434a;
  --muted: #98a9b4;
  --blue: #43a9d0;
  --green: #73a779;
  --panel: #0d1319;
  --wood: #e6bd7c;
  --wood-line: #85704e;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(#394148 0.65px, transparent 0.8px) 0 0/8px 8px;
  font-size: 16px;
  line-height: 1.6;
}
a {
  color: #aed6e9;
}
button,
a {
  touch-action: manipulation;
}
button {
  font: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #76c9ed;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.edge {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 66px;
  overflow: hidden;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #42494b;
  opacity: 0.65;
  pointer-events: none;
  z-index: -0;
}
.edge span {
  font-size: 18px;
  color: #518951;
}
.edgeLeft {
  left: 12px;
  transform: rotate(180deg);
}
.edgeRight {
  right: 12px;
}
.centerPage {
  position: relative;
  width: min(1220px, calc(100% - 180px));
  margin: 0 auto;
  padding: 0 0 32px;
}
.centerCard {
  background: #05080bed;
  border: 1px solid #4d555c;
  min-height: 690px;
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 205px;
  padding: 30px 34px;
  border-bottom: 3px double #4d5b65;
  background:
    repeating-linear-gradient(0deg, #0004 0 1px, transparent 1px 4px),
    linear-gradient(115deg, #07121e, #113650 56%, #09131d);
}
.eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 650;
  margin: 0 0 8px;
}
.centerTitle {
  position: relative;
  margin: 0;
  font-size: 34px;
  letter-spacing: 3px;
  text-shadow: 0 2px 4px #000;
}
.centerTitle span {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 1px;
}
.heroCopy {
  position: relative;
  text-align: right;
  margin: 32px 0 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 2px;
}
.heroGrid {
  position: absolute;
  z-index: -1;
  inset: -110px -60px -100px 35%;
  transform: rotate(-16deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 62px, #3b63804d 63px 65px),
    repeating-linear-gradient(90deg, transparent 0 62px, #3b63804d 63px 65px);
  opacity: 0.55;
}
.heroGrid span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 82px;
  height: 94px;
  border: 1px solid #6d998a;
  background: #17342ee0;
  color: #94b6a1;
  font-size: 44px;
  clip-path: polygon(50% 0, 86% 15%, 100% 100%, 0 100%, 14% 15%);
}
.heroGrid span:nth-child(1) {
  top: 110px;
  left: 40%;
}
.heroGrid span:nth-child(2) {
  top: 225px;
  left: 16%;
}
.heroGrid span:nth-child(3) {
  top: 260px;
  left: 66%;
}
.centerContent {
  padding: 22px 28px 38px;
}
.intro {
  margin: 0 0 30px;
  color: #bdc8d0;
}
.sectionTitle,
.roomSection h2 {
  margin: 0 0 16px;
  padding: 7px 14px;
  border-left: 4px solid var(--blue);
  background: linear-gradient(90deg, #122331, #0a111800);
  font-size: 19px;
}
.sectionTitle small,
.roomSection h2 small {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  margin-left: 8px;
}
.statusGrid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
  font-size: 14px;
}
.statusGrid dt {
  color: var(--muted);
}
.statusGrid dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.notice {
  margin: 18px 0 0;
  padding: 10px 14px;
  border-left: 2px solid #597482;
  background: #111b23;
  font-size: 14px;
}
.notice[data-state="ok"] {
  border-color: var(--green);
  background: #102019;
  color: #bfd4c1;
}
.notice[data-state="ng"] {
  border-color: #c37b65;
  background: #271a17;
  color: #e8b5a6;
}
.roomSection {
  margin-top: 30px;
}
.roomList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  color: #c2cbd0;
  padding: 4px 0 12px;
}
.roomButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 20px;
  border: 1px solid #3d515c;
  border-left: 3px solid var(--green);
  background: linear-gradient(115deg, #14242b, #0c141b);
  color: #ecf2f5;
  text-decoration: none;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.roomButton::after {
  content: "›";
  font-size: 24px;
  color: var(--green);
}
.roomButton:hover {
  border-color: #7aa49a;
  background: #1b3138;
}
footer {
  text-align: center;
  margin-top: 22px;
  border-top: 1px solid #2e373d;
  padding: 14px;
  font-size: 12px;
  color: #a6afb4;
}
footer span {
  color: #77868f;
  margin-left: 10px;
}
.roomPage {
  position: relative;
  width: min(1430px, calc(100% - 160px));
  margin: 0 auto;
  padding: 12px 0 28px;
}
.roomCard {
  border: 1px solid #48525b;
  background: #080d12f5;
  min-height: 700px;
}
.roomHeader {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, #0003 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #142b3c, #0b1219);
}
.roomTitle {
  font-size: 21px;
  margin: 0;
}
.backLink {
  text-decoration: none;
  white-space: nowrap;
}
.roomLayout {
  grid-template-columns: 172px minmax(0, 1fr);
}
.roomSidebar {
  padding: 18px 12px;
  background: #0c1218;
}
.sideBrand {
  font-weight: 700;
  font-size: 21px;
  margin-bottom: 28px;
}
.sideBrand span {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--green);
}
.roomSidebar .sectionTitle {
  font-size: 14px;
  padding: 5px 8px;
}
.roomSidebar .statusGrid {
  grid-template-columns: 1fr;
  gap: 2px;
  font-size: 12px;
}
.roomSidebar .statusGrid dd {
  margin-bottom: 10px;
  color: #edf1f4;
}
.roomSidebar .notice {
  font-size: 12px;
  padding: 8px;
}
.matchContent {
  padding: 12px;
}
.gameArea {
  margin: 0;
  position: relative;
}
.gameToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  font-weight: 700;
}
.gameToolbar small {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}
.actions button,
.actions a,
.gameToolbar button {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #526573;
  border-radius: 0;
  background: linear-gradient(#1b2c38, #111c25);
  color: #e3ebef;
  text-decoration: none;
}
.actions button:hover,
.actions a:hover,
.gameToolbar button:not(:disabled):hover {
  border-color: #83bed0;
  background: #243d4a;
}
.gameToolbar button:disabled {
  opacity: 0.4;
}
.boardLayout {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px 210px;
  gap: 8px;
  align-items: start;
}
.boardFrame {
  padding: 8px;
  border: 1px solid #758582;
  background: linear-gradient(135deg, #34514e, #1b2c32);
  box-shadow: inset 0 0 0 3px #101d22;
}
.board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  background: var(--wood-line);
  border: 2px solid #725b3a;
  touch-action: manipulation;
  user-select: none;
}
.square {
  border: 0;
  border-radius: 0;
  padding: 0;
  aspect-ratio: 1;
  min-width: 0;
  background: var(--wood);
}
.square:nth-child(even) {
  background: #eac589;
}
.square img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.square.target {
  background: #b5ca88;
}
.square.selected,
.handPiece.selected {
  background: #f5ae55;
  box-shadow: inset 0 0 0 3px #a44b16;
}
.flip {
  transform: rotate(180deg);
}
.handRail {
  border: 1px solid #3d5151;
  background: linear-gradient(90deg, #172c2a, #12211f);
  padding: 4px;
  min-width: 0;
}
.railLabel {
  display: block;
  color: #aebfb7;
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
  margin: 2px 0 5px;
}
.hand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.handPiece {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 46px;
  padding: 1px;
  border: 1px solid #536358;
  background: #d2bf92;
  color: #241f17;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
}
.handPiece img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
}
.handPiece span {
  padding: 0 2px;
}
.ownHand {
  align-self: end;
}
.gameInfo {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.playerBar {
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid #3b4c5a;
  border-left: 3px solid #4887ab;
  background: linear-gradient(115deg, #162735, #0c151e);
}
.playerBar.self {
  border-left-color: var(--green);
  background: linear-gradient(115deg, #1b2b25, #101a18);
}
.playerBar > span {
  display: block;
  overflow-wrap: anywhere;
}
.playerBar > span:not(.eyebrow) {
  font-weight: 700;
}
.timeLine {
  display: flex;
  gap: 7px;
  align-items: baseline;
  color: #aebbc3;
  font-size: 12px;
  margin-top: 5px;
}
.clock {
  font-size: 34px;
  line-height: 1.3;
  color: #f0f4f5;
  font-variant-numeric: tabular-nums;
}
.clock.lowTime {
  color: #ff6464;
}
.gameMessage {
  min-height: 130px;
  border: 1px solid #405058;
  background: #101a20;
  padding: 14px 12px;
  font-size: 14px;
}
.gameMessage p {
  margin: 0;
}
.gameMessage p + p:not(:empty) {
  margin-top: 12px;
  color: #efba8b;
}
.promotion {
  position: absolute;
  border: 2px solid #b8a779;
  background: #101b24;
  box-shadow: 0 12px 32px #000b;
}
.promotion p {
  margin: 0;
}
.statePanel {
  padding: 24px;
  border: 1px solid #344752;
  background: linear-gradient(110deg, #11212c, #090f14);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.statePanel h2 {
  font-size: 26px;
  margin: 0 0 12px;
}
.resultPanel {
  margin-top: 16px;
  border-left: 3px solid #79a891;
}
.resultPanel p {
  margin: 8px 0;
}
@media (min-width: 1600px) {
  .boardLayout {
    grid-template-columns: 64px minmax(0, 1fr) 64px 240px;
  }
  .handPiece {
    min-height: 52px;
  }
  .handPiece img {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 1200px) {
  .edge {
    display: none;
  }
  .roomPage {
    width: calc(100% - 24px);
  }
  .roomLayout {
    grid-template-columns: 145px minmax(0, 1fr);
  }
  .boardLayout {
    grid-template-columns: 46px minmax(0, 1fr) 46px 180px;
    gap: 6px;
  }
  .handRail {
    padding: 2px;
  }
  .handPiece {
    min-height: 39px;
  }
  .handPiece img {
    width: 26px;
    height: 26px;
  }
  .railLabel {
    font-size: 8px;
  }
  .gameInfo .playerBar {
    padding: 10px 8px;
  }
  .timeLine {
    gap: 5px;
  }
  .promotion {
    left: 52px;
    right: 190px;
  }
}
@media (max-width: 900px) {
  .roomLayout {
    display: flex;
    flex-direction: column;
  }
  .roomSidebar {
    order: 2;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .sideBrand {
    display: none;
  }
  .roomSidebar .statusGrid {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 4px 12px;
  }
  .roomSidebar .statusGrid dd {
    margin: 0;
  }
  .roomSidebar .sectionTitle {
    margin-bottom: 12px;
  }
  .centerPage {
    width: calc(100% - 28px);
  }
  .edge {
    display: none;
  }
  .roomHeader .eyebrow {
    display: none;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .roomPage {
    width: 100%;
    padding: 0;
  }
  .roomCard {
    border-left: 0;
    border-right: 0;
    min-height: 100vh;
  }
  .roomHeader {
    padding: 8px 10px;
    gap: 18px;
  }
  .roomTitle {
    font-size: 17px;
  }
  .matchContent {
    padding: 6px;
  }
  .gameToolbar {
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
  .gameToolbar button {
    padding: 5px 20px;
  }
  .boardLayout {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .opponentHand {
    grid-row: 1;
  }
  .boardFrame {
    grid-row: 2;
    padding: 5px;
  }
  .ownHand {
    grid-row: 3;
  }
  .handRail {
    display: flex;
    align-items: center;
    padding: 4px;
    gap: 5px;
  }
  .railLabel {
    writing-mode: vertical-rl;
    font-size: 9px;
    margin: 0;
    letter-spacing: 1px;
  }
  .hand {
    flex: 1;
    flex-direction: row;
    gap: 3px;
  }
  .handPiece {
    flex: 1;
    min-height: 37px;
    flex-wrap: nowrap;
    font-size: 11px;
  }
  .handPiece img {
    width: min(6vw, 32px);
    height: min(6vw, 32px);
  }
  .handPiece span {
    padding: 0 1px;
  }
  .gameInfo {
    grid-row: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .gameInfo .playerBar {
    padding: 8px;
  }
  .playerBar > span:not(.eyebrow) {
    font-size: 14px;
  }
  .playerBar .eyebrow {
    font-size: 9px;
    margin: 0;
  }
  .clock {
    font-size: 27px;
  }
  .timeLine {
    margin-top: 2px;
    font-size: 10px;
  }
  .gameMessage {
    grid-column: 1/-1;
    min-height: 85px;
    padding: 12px;
  }
  .promotion {
    position: fixed;
    top: 30%;
    left: 12px;
    right: 12px;
    padding: 16px;
  }
  .promotion .actions {
    gap: 6px;
  }
  .promotion .actions button {
    padding: 10px 12px;
  }
  .statePanel {
    padding: 18px;
  }
  .centerPage {
    width: calc(100% - 16px);
  }
  .hero {
    min-height: 185px;
    padding: 24px 18px;
  }
  .centerTitle {
    font-size: 26px;
    letter-spacing: 1px;
  }
  .centerTitle span {
    display: block;
    font-size: 17px;
    margin-top: 4px;
  }
  .heroCopy {
    font-size: 14px;
    margin-top: 24px;
  }
  .heroGrid {
    left: 10%;
  }
  .centerContent {
    padding: 18px 14px 28px;
  }
  .intro {
    font-size: 14px;
    margin-bottom: 24px;
  }
  .roomList {
    grid-template-columns: 1fr;
  }
  .statusGrid {
    grid-template-columns: 115px minmax(0, 1fr);
    gap: 8px 12px;
    font-size: 13px;
  }
  .sectionTitle,
  .roomSection h2 {
    font-size: 17px;
  }
}
/* Revision: fit the complete game to the available viewport. */
.square {
  display: block;
  line-height: 0;
  overflow: hidden;
  appearance: none;
}
.square.selected,
.handPiece.selected {
  background: #f5ae55;
}
.square:focus:not(:focus-visible),
.handPiece:focus:not(:focus-visible) {
  outline: none;
}
.roomLayout {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
}
.roomSidebar {
  order: 0;
  border-right: 1px solid var(--line);
  border-top: 0;
}
.matchContent {
  justify-self: center;
  min-width: 0;
  transform-origin: top center;
}
.hasGame .boardLayout {
  grid-template-columns: 62px 560px 62px minmax(0, 1fr);
  gap: 8px;
}
.hasGame .boardFrame {
  padding: 8px;
  grid-row: auto;
}
.hasGame .handRail {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  grid-row: auto;
}
.hasGame .railLabel {
  writing-mode: horizontal-tb;
  font-size: 10px;
  margin: 2px 0;
}
.hasGame .hand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hasGame .opponentHand .hand {
  flex-direction: column-reverse;
}
.hasGame .handPiece {
  position: relative;
  display: block;
  flex: none;
  width: 59.11px;
  height: 59.11px;
  min-height: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  overflow: hidden;
}
.hasGame .handPiece img {
  display: block;
  width: 100%;
  height: 100%;
}
.hasGame .handPiece span {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1px 3px;
  background: #17211be8;
  color: #fff;
  font-size: 13px;
}
.hasGame .opponentHand .handPiece span {
  right: auto;
  bottom: auto;
  left: 0;
  top: 0;
}
.hasGame .gameInfo {
  grid-row: auto;
  grid-template-columns: 1fr;
  gap: 8px;
}
.hasGame .gameMessage {
  grid-column: auto;
}
.hasGame .ownHand {
  align-self: end;
}
.tallLayout .roomLayout {
  display: flex;
  flex-direction: column;
}
.tallLayout .roomSidebar {
  order: 2;
  border-right: 0;
  border-top: 1px solid var(--line);
  width: 100%;
}
.tallLayout .matchContent {
  align-self: center;
}
.tallLayout.hasGame .boardLayout {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}
.tallLayout.hasGame .opponentHand {
  grid-row: 1;
}
.tallLayout.hasGame .boardFrame {
  grid-row: 2;
  padding: 5px;
}
.tallLayout.hasGame .ownHand {
  grid-row: 3;
}
.tallLayout.hasGame .handRail {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 2px;
}
.tallLayout.hasGame .railLabel {
  writing-mode: vertical-rl;
  font-size: 9px;
  margin: 0;
}
.tallLayout.hasGame .hand {
  flex: 1;
  flex-direction: row;
  gap: 2px;
}
.tallLayout.hasGame .opponentHand .hand {
  flex-direction: row-reverse;
}
.tallLayout.hasGame .handPiece {
  width: 45.11px;
  height: 45.11px;
}
.tallLayout.hasGame .gameInfo {
  grid-row: 4;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.tallLayout.hasGame .gameMessage {
  grid-column: 1/-1;
  min-height: 48px;
  padding: 8px;
}
.hasGame .gameToolbar {
  margin-bottom: 6px;
  padding-bottom: 6px;
}
.hasGame .statePanel {
  padding: 12px;
  margin: 8px 0 0;
}
.hasGame .statePanel h2 {
  font-size: 20px;
  margin: 0;
}
.hasGame .statePanel .eyebrow {
  display: none;
}
.hasGame .statePanel p {
  margin: 4px 0;
}
.hasGame .statePanel .actions {
  margin-top: 8px;
}
.promotion {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: max-content;
  max-width: calc(100vw - 12px);
  padding: 12px;
  z-index: 10;
  box-sizing: border-box;
}
.promotion .actions {
  gap: 6px;
  margin-top: 8px;
}
.promotion .actions button {
  padding: 8px 10px;
}
.leaveDialog {
  max-width: min(440px, calc(100% - 24px));
  border: 1px solid #75979f;
  background: #101c25;
  color: #eef3f5;
  padding: 22px;
}
.leaveDialog::backdrop {
  background: #0009;
}
.leaveDialog h2 {
  margin: 0;
  font-size: 22px;
}

.hasGame .handPiece,
.tallLayout.hasGame .handPiece {
  width: var(--cellPx);
  height: var(--cellPx);
}
/* Qinoa reference colors; all tunable values come from RoomConfig.boardStyle. */
.hasGame .boardFrame,
.tallLayout.hasGame .boardFrame {
  padding: 12px;
  background: var(--board-base);
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}
.board {
  position: relative;
  gap: 0;
  border: var(--board-outerPx) solid var(--board-strong);
  background: var(--board-base);
}
.square,
.square:nth-child(even) {
  position: relative;
  background: var(--board-base);
  box-shadow: inset -1px -1px var(--board-grid);
}
.square::after,
.handPiece.selected::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--board-markPx) solid transparent;
}
.square.lastOwn {
  background: var(--board-lastOwn);
}
.square.lastOther {
  background: var(--board-lastOther);
}
.square.lastOwn::after,
.square.lastOther::after {
  border-color: var(--board-lastBorder);
}
.square.target {
  background: var(--board-target);
}
.square.target::after {
  border-color: var(--board-targetBorder);
}
.square.selected,
.handPiece.selected {
  background: var(--board-selected);
  box-shadow: none;
}
.square.selected::after,
.handPiece.selected::after {
  border-color: var(--board-selectionBorder);
}
/* Overlay preserves equal square and piece sizes while strengthening the 3x3 grid. */
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      circle at 33.333333% 33.333333%,
      var(--board-strong) 0 var(--board-dotPx),
      transparent calc(var(--board-dotPx) + 0.5px)
    ),
    radial-gradient(
      circle at 66.666667% 33.333333%,
      var(--board-strong) 0 var(--board-dotPx),
      transparent calc(var(--board-dotPx) + 0.5px)
    ),
    radial-gradient(
      circle at 33.333333% 66.666667%,
      var(--board-strong) 0 var(--board-dotPx),
      transparent calc(var(--board-dotPx) + 0.5px)
    ),
    radial-gradient(
      circle at 66.666667% 66.666667%,
      var(--board-strong) 0 var(--board-dotPx),
      transparent calc(var(--board-dotPx) + 0.5px)
    ),
    linear-gradient(
      90deg,
      transparent calc(33.333333% - var(--board-majorPx)),
      var(--board-strong) 0 33.333333%,
      transparent 0 calc(66.666667% - var(--board-majorPx)),
      var(--board-strong) 0 66.666667%,
      transparent 0
    ),
    linear-gradient(
      180deg,
      transparent calc(33.333333% - var(--board-majorPx)),
      var(--board-strong) 0 33.333333%,
      transparent 0 calc(66.666667% - var(--board-majorPx)),
      var(--board-strong) 0 66.666667%,
      transparent 0
    );
}
.handPiece:disabled {
  opacity: 1;
}
.handPiece.emptyHand {
  opacity: var(--board-emptyOpacity);
}
.handPiece.emptyHand span {
  display: none;
}
/* Compact center information and larger in-hand counts. */
.hasGame .handPiece span {
  font-size: var(--board-countFontPx);
}
.centerContent .intro {
  margin-bottom: 14px;
}
.centerContent .roomSection {
  margin: 0 0 20px;
}
.centerContent .sectionTitle,
.centerContent .roomSection h2 {
  padding: 2px 10px;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
}
.accountGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.accountGrid > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.accountGrid dt {
  color: var(--muted);
  white-space: nowrap;
}
.accountGrid dd {
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.centerView .notice {
  margin-top: 10px;
  padding: 6px 10px;
}
.centerView .roomList {
  display: block;
  padding: 0;
  overflow-x: auto;
}
.roomTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  text-align: left;
}
.roomTable th {
  padding: 5px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.roomTable td {
  padding: 10px;
  border-bottom: 1px solid #27383f;
  overflow-wrap: anywhere;
}
.roomTable a {
  font-weight: 600;
  text-decoration: none;
}
.roomTable a:hover {
  text-decoration: underline;
}
.roomTable .roomRules {
  font-size: 12px;
  color: #b4c9d3;
  white-space: normal;
}
.queueClock circle {
  stroke: #73b3c4;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.queueClock circle:nth-child(2) {
  stroke: #83aa88;
}
.queueClock circle:nth-child(3) {
  stroke: #b5c9c8;
}
@media (max-width: 600px) {
  .accountGrid {
    gap: 4px 16px;
  }
  .roomTable {
    font-size: 13px;
  }
  .roomTable th,
  .roomTable td {
    padding: 6px 4px;
  }
  .roomTable th:first-child {
    width: 38%;
  }
  .roomTable .roomRules {
    font-size: 11px;
  }
  .centerContent .roomSection {
    margin-bottom: 16px;
  }
}
.roomTable .roomEntry {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #47616a;
  background: #13262c;
  color: #e3edf0;
  text-decoration: none;
}
.roomTable .roomEntry:hover {
  border-color: #83b2a0;
  background: #1d393c;
  text-decoration: none;
}

/* Center cards and staggered matchmaking dial. */
.centerConnections {
  text-align: right;
  color: var(--muted);
  margin: 0 0 10px;
  font-size: 13px;
}
.centerRoomCard {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 70px minmax(0, 3fr);
  align-items: center;
  border: 1px solid #344950;
  background: #102027;
  color: #dce8ed;
  text-decoration: none;
}
.centerRoomCard:hover,
.centerRoomCard:focus-visible {
  background: #1b333a;
  border-color: #83b2a0;
  text-decoration: none;
}
.roomCount {
  color: #b4c9d3;
}
.centerRoomCard .roomRules {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ruleSeparator {
  color: #52636b;
}
.roomRules > span:not(.ruleSeparator) {
  white-space: nowrap;
}
.queueDial {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 1;
}
.queueClock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
}
.queueClock circle {
  stroke-width: 6;
  stroke-linecap: butt;
}
.queueRules {
  position: absolute;
  inset: 24%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: clamp(10px, 2.8vw, 14px);
}
.playing .roomSidebar .statusGrid,
.playing .roomSidebar .sectionTitle {
  display: none;
}
@media (max-width: 600px) {
  .centerRoomCard {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px;
  }
  .centerRoomCard .roomRules {
    grid-column: 1/-1;
    justify-content: flex-start;
    gap: 8px;
    font-size: 12px;
  }
}

/* Portrait room cards and centered waiting card. */
.roomHeader {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(0, auto) minmax(72px, 1fr);
  gap: 12px;
}
.roomHeader .backLink {
  justify-self: start;
}
.roomHeader .roomTitle {
  text-align: center;
}
.roomHeader .eyebrow {
  justify-self: end;
  margin: 0;
}
body:not(.hasGame) .roomLayout {
  display: flex;
  flex-direction: column;
}
body:not(.hasGame) .matchContent {
  width: 100%;
  align-self: center;
}
body:not(.hasGame) .roomSidebar {
  order: 2;
  border-right: 0;
  border-top: 1px solid var(--line);
}
#queuePanel {
  width: min(340px, 100%);
  text-align: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #1b303b, #0d171f 65%);
  box-shadow:
    0 12px 36px #0005,
    inset 0 1px #bad3df28;
}
.queueDial {
  width: min(260px, 100%);
}
.queueRules {
  position: static;
  display: grid;
  gap: 0;
  text-align: center;
}
.queueRules > div {
  border-bottom: 1px solid #88a8bb20;
}
.queueRules > div:last-child {
  border-bottom: 0;
}
#queueMessage {
  color: var(--muted);
}
#endMessage:empty {
  display: none;
}
.roomCards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 260px));
  justify-content: center;
}
.centerRoomCard {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #50646c;
  border-radius: 12px;
  background: linear-gradient(145deg, #1d333f, #0c171e 65%);
  box-shadow: 0 8px 20px #0005;
  text-align: center;
  overflow-wrap: anywhere;
}
.roomCardArt {
  display: grid;
  place-items: center;
  width: 100%;
  background:
    radial-gradient(ellipse, #37676250, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 25px, #8abac110 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 25px, #8abac110 25px 26px);
  color: #a6c5b7;
  font-family: serif;
}
.centerRoomCard .roomRules {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.centerRoomCard .roomRules > span {
  white-space: normal;
  border-bottom: 1px solid #88a8bb20;
}
.roomCardAction {
  display: block;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid #6b938955;
  color: #b7d5ce;
}
.centerRoomCard:hover,
.centerRoomCard:focus-visible {
  background: linear-gradient(145deg, #294754, #14242b 65%);
  border-color: #9bc4b6;
}
.hasGame .matchContent {
  overflow-anchor: none;
}
@media (max-width: 600px) {
  .roomHeader {
    gap: 6px;
    padding: 10px;
  }
  .roomHeader .roomTitle {
    font-size: 18px;
  }
  #queuePanel {
    margin-top: 18px;
    padding: 20px;
  }
  .roomCards {
    gap: 16px;
  }
  .centerRoomCard {
    padding: 18px;
  }
}

/* Quiet navigation and reference-style hand count badges. */
.roomHeader .backLink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border: 1px solid #72909d55;
  border-radius: 4px;
  background: #b9d0dc08;
  color: #a9c4d0;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
}
.roomHeader .backLink::before {
  content: "‹";
  font-size: 21px;
  line-height: 1;
  color: #91adba;
}
.roomHeader .backLink:hover {
  color: #e1edf1;
  border-color: #8baab488;
  background: #b9d0dc12;
}
.roomHeader .backLink:focus-visible {
  outline: 2px solid #76a8ba;
  outline-offset: 2px;
}
.hasGame .roomLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hasGame .roomSidebar {
  display: none;
}
.gameToolbar {
  justify-content: flex-end;
}
.hasGame .handPiece span {
  background: var(--board-countBg);
  color: var(--board-countInk);
  border: 0;
  border-radius: var(--board-countRadiusPx);
  padding: var(--board-countPadY) var(--board-countPadX);
  font-size: min(
    var(--board-countFontPx),
    calc(var(--cellPx) * var(--board-countFontScale))
  );
  line-height: 1.1;
  letter-spacing: -1px;
  font-weight: 600;
  box-shadow: none;
}

/* Compact cards: approximately 35–40% of the previous area. */
#queuePanel {
  width: min(220px, 100%);
  border-radius: 8px;
}
#queuePanel h2 {
  font-size: 19px;
}
#queuePanel .eyebrow {
  font-size: 9px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.queueDial {
  width: 130px;
}
.queueElapsed {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #d2e0e7;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.queueRules {
  font-size: 12px;
  line-height: 1.5;
}
#queueMessage {
  font-size: 11px;
  margin: 10px 0 0;
}
.roomCards {
  grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 170px));
  padding: 8px 0;
}
.centerRoomCard {
  min-height: 0;
  border-radius: 8px;
}
.centerRoomCard > strong {
  font-size: 15px;
}
.roomCardArt {
  font-size: 38px;
}
.centerRoomCard .roomRules {
  font-size: 12px;
  line-height: 1.5;
}
.roomCount {
  font-size: 11px;
}
.roomCardAction {
  font-size: 11px;
  letter-spacing: 0;
}

/* Reduce card area through spacing, without changing text sizes. */
#queuePanel {
  width: min(200px, 100%);
  padding: 10px;
  margin: 12px auto 18px;
}
#queuePanel h2 {
  margin-bottom: 4px;
}
.queueDial {
  margin: 6px auto;
}
.queueRules > div {
  padding: 2px 0;
}
#queueMessage {
  margin-top: 6px;
}
.roomCards {
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 156px));
  gap: 10px;
}
.centerRoomCard {
  padding: 8px;
}
.roomCardArt {
  height: 48px;
  margin: 4px 0;
}
.centerRoomCard .roomRules > span {
  padding: 2px 0;
}
.roomCount {
  margin: 4px 0;
}
.roomCardAction {
  padding: 3px 0;
}

/* Interaction feedback and accidental text-selection prevention. */
.centerRoomCard .roomRules > span {
  border-bottom: 0;
}
.centerRoomCard,
.roomHeader,
.gameArea,
.statePanel {
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) {
  body:not(.choosingPromotion) .square.hoverable:hover,
  body:not(.choosingPromotion) .handPiece:not(:disabled):hover {
    background: var(--board-hover);
    opacity: var(--board-hoverOpacity);
  }
}

/* Revision 11: room lifetime, rectangular cells, unmodified piece proportions. */
.roomCards {
  justify-content: start;
}
.roomLifetime {
  font-size: 11px;
  line-height: 1.5;
  color: #78be89;
  margin-top: 5px;
}
.roomLifetime.closingSoon {
  color: #ff7770;
}
.centerRoomCard.roomClosed {
  cursor: default;
  border-color: #344950;
}
.centerRoomCard.roomClosed:hover {
  background: linear-gradient(145deg, #1d333f, #0c171e 65%);
}
.square {
  aspect-ratio: 1 / var(--cellRatio);
  overflow: visible;
}
.hasGame .handPiece,
.tallLayout.hasGame .handPiece {
  height: calc(var(--cellPx) * var(--cellRatio));
  overflow: visible;
}
.square .pieceVisual,
.hasGame .handPiece .pieceVisual {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
.square .pieceVisual.flip,
.hasGame .handPiece .pieceVisual.flip {
  transform: translateX(-50%) rotate(180deg);
}
.square .pieceVisual img,
.hasGame .handPiece .pieceVisual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center;
}
.square::after,
.handPiece.selected::after {
  z-index: 1;
}
.hasGame .handPiece > span {
  z-index: 2;
  pointer-events: none;
}
.gameMessage #gameRules {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* Wide view: player information follows turn order, regardless of local side. */
body:not(.tallLayout) .gameInfo .playerBar[data-side="0"] {
  order: 0;
}
body:not(.tallLayout) .gameInfo .playerBar[data-side="1"] {
  order: 1;
}
body:not(.tallLayout) .gameInfo .gameMessage {
  order: 2;
}

/* Account statistics: compact rows; existing room cards retain their layout. */
.accountStats table {
  width: 100%;
  max-width: 620px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.accountStats caption {
  text-align: left;
  font-weight: 700;
  padding: 0 0 6px;
}
.accountStats th,
.accountStats td {
  padding: 5px 8px;
  text-align: right;
  border-bottom: 1px solid #263941;
}
.accountStats th:first-child {
  text-align: left;
  white-space: nowrap;
}
.accountStats thead th {
  color: #9fb9c7;
  font-size: 12px;
  font-weight: 400;
}
.accountStats tbody th {
  font-size: 13px;
  font-weight: 400;
}
.accountStats tbody td {
  font-size: 14px;
}
.accountStats p {
  color: #9fb9c7;
  margin: 0;
}
@media (max-width: 480px) {
  .accountStats th,
  .accountStats td {
    padding: 5px 3px;
  }
  .accountStats thead th {
    font-size: 11px;
  }
}

/* Native top-layer result panel never changes the board's layout or scale. */
.resultDialog {
  box-sizing: border-box;
  width: 440px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  margin: auto;
  padding: 24px;
  background: #0c1b25;
  color: #e9f0f4;
  border: 1px solid #476779;
}
.resultDialog::backdrop {
  background: rgba(0, 8, 14, 0.72);
}
.resultDialog h2 {
  margin: 8px 0 12px;
  font-size: 28px;
}
.resultDialog p {
  margin: 10px 0;
}
.resultDialog .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.resultDialog .actions > * {
  padding: 9px 12px;
}
.rankUp {
  color: #e6c985;
  font-weight: 700;
}
#resultSave {
  color: #a5c1ce;
  font-size: 13px;
}
@media (max-width: 480px) {
  .accountStats {
    overflow-x: auto;
  }
  .accountStats th:last-child,
  .accountStats td:last-child {
    white-space: nowrap;
  }
}

/* Player identity and clocks remain legible without English headings. */
.playerBar > span:not(.eyebrow) {
  font-size: 21px;
}
.playerBar .timeLine {
  font-size: 14px;
}
.playerBar .clock {
  font-size: 40px;
}

/* Formation editor / saved own-side positions. */
.formationEditor {
  max-width: 540px;
  margin: 20px auto;
  text-align: center;
}
.formationBoard {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  background: #d9b77a;
  padding: 6px;
  border: 1px solid #8a7151;
  user-select: none;
  touch-action: manipulation;
  gap: 0;
}
.formSquare {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1 / 1.1;
  padding: 0;
  margin: 0;
  border: 0;
  border-right: 1px solid #8f795b;
  border-bottom: 1px solid #8f795b;
  border-radius: 0;
  background: #e5bd7d;
  box-shadow: none;
  color: #182019;
}
.formSquare:nth-child(9n + 1) {
  border-left: 1px solid #8f795b;
}
.formSquare:nth-child(-n + 9) {
  border-top: 1px solid #8f795b;
}
.formSquare img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.formSquare.selected {
  background: #80b7dd;
  box-shadow: inset 0 0 0 3px #27698c;
}
.formSquare.target {
  background: #a2c592;
  box-shadow: inset 0 0 0 2px #478156;
}
.formSquare:hover {
  filter: brightness(1.06);
}
.formationSlots {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 20px 0;
}
.formationSlot,
.formationChoice {
  width: 250px;
  max-width: 100%;
  padding: 12px;
  background: #101f29;
  border: 1px solid #36505d;
  text-align: center;
}
.formationSlot h3 {
  margin: 0 0 8px;
}
.formationSlot button {
  margin-top: 12px;
}
.formPreview:not(.formationBoard) {
  padding: 30px 0;
  color: #9ab0bc;
}
.formationChoice {
  display: block;
  cursor: pointer;
}
.formationChoice strong {
  display: block;
  margin-bottom: 12px;
}
.formationChoice:hover {
  border-color: #83b9cf;
}
#formationPanel,
#formationPick {
  padding: 12px;
}
#formationNotice {
  min-height: 1.5em;
}
#formationCount {
  font-variant-numeric: tabular-nums;
}
#formationOpen,
#formationBack,
.formationSlot button {
  font: inherit;
  padding: 8px 12px;
  background: #172a36;
  color: #e2ebef;
  border: 1px solid #4c6978;
  cursor: pointer;
}
#formationOpen:hover,
#formationBack:hover,
.formationSlot button:hover {
  background: #213b4b;
}
.formationSlot button:disabled {
  opacity: 0.4;
  cursor: default;
}
#formationBack {
  font-size: 14px;
  padding: 5px 9px;
}

/* Center presentation: proportions, palette and corner details follow Orb Ship Front. */
body.centerView {
  padding: 8px;
  background-color: #111;
  color: #ccc;
  background-image: radial-gradient(#333 1px, transparent 1px);
  background-size: 8px 8px;
  font-family:
    "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    sans-serif;
  line-height: 1.4;
}
.centerView .centerPage {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 24px;
  z-index: 1;
}
.centerView .centerCard {
  position: relative;
  min-height: 0;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #333;
  box-shadow:
    0 0 15px #3388ff26,
    inset 0 0 20px #000;
}
.centerView .centerCard::before,
.centerView .centerCard::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #555;
  pointer-events: none;
  z-index: 3;
}
.centerView .centerCard::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.centerView .centerCard::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
.centerView .hero {
  position: relative;
  margin: 0 0 4px;
  border: 1px solid #333;
  background: #000;
  isolation: isolate;
}
.centerView .heroImage {
  display: block;
  filter: brightness(0.8);
}
.centerView .hero::before,
.centerView .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.centerView .hero::before {
  background: radial-gradient(ellipse at center, transparent 50%, #000c 100%);
  z-index: 1;
}
.centerView .hero::after {
  background: linear-gradient(to bottom, transparent 50%, #0006 51%) 0 0/100%
    4px;
  animation: center-scan 4s linear infinite;
  z-index: 2;
}
@keyframes center-scan {
  to {
    background-position: 0 40px;
  }
}
.centerView .centerTitle {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: #fff;
  text-align: center;
  text-shadow:
    0 2px 4px #000e,
    0 0 10px #000;
  z-index: 3;
}
.centerView .heroCopy {
  position: absolute;
  top: 64px;
  right: 8px;
  color: #ddd;
  letter-spacing: 0;
  z-index: 3;
  text-shadow: 0 2px 4px #000e;
}
.centerView .centerContent {
  padding: 6px 6px 18px;
  border-top: 1px solid #333;
}
.centerView .sectionTitle,
.centerView .roomSection h2,
.centerView #formationTitle {
  font-size: 19px;
  color: #eee;
  border-left: 5px solid #0066aa;
  padding: 5px 12px;
  margin: 16px 0 8px;
  background: linear-gradient(90deg, #2050b433, transparent);
}
.centerView .centerConnections {
  color: #aaa;
  margin: 2px 0 6px;
}
.centerView a {
  color: #acf;
  text-decoration: none;
}
.centerView a:hover {
  color: #aaf;
  text-decoration: underline;
}
.centerView button:not(.formSquare) {
  background: #141414cc;
  color: #ddd;
  border: 1px solid #555;
  border-radius: 2px;
  padding: 6px 14px;
  box-shadow: inset 0 0 5px #0008;
}
.centerView button:not(.formSquare):hover:not(:disabled) {
  background: #3388ff33;
  border-color: #38f;
}
.centerView button:not(.formSquare):disabled {
  color: #888;
  border-color: #333;
}
.centerView .roomCards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 4px 0 8px;
}
.centerView .centerRoomCard {
  position: relative;
  flex: 0 1 156px;
  width: 156px;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  border: 1px solid #555;
  border-radius: 2px;
  background: #0a0a0ab3;
  box-shadow: inset 0 0 10px #000c;
  color: #ddd;
  text-align: center;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.centerView .centerRoomCard::before,
.centerView .centerRoomCard::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  border-color: #888;
  border-style: solid;
  transition: border-color 0.2s;
}
.centerView .centerRoomCard::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}
.centerView .centerRoomCard::after {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}
.centerView .centerRoomCard > strong {
  width: 100%;
  color: #fff;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px dashed #555;
}
.centerView .roomCardArt {
  height: 48px;
  margin: 4px 0;
  color: #738778;
  background: radial-gradient(ellipse, #55aa6617, transparent 70%);
}
.centerView .centerRoomCard .roomRules {
  color: #5a6;
  font-size: 12px;
  line-height: 1.5;
}
.centerView .centerRoomCard .roomRules > span {
  padding: 2px 0;
  border: 0;
}
.centerView .roomCount {
  color: #5a6;
}
.centerView a.centerRoomCard:not(.roomClosed):hover,
.centerView a.centerRoomCard:not(.roomClosed):focus-visible {
  background: #c8640026;
  border-color: #c70;
  color: #ddd;
  text-decoration: none;
  box-shadow:
    0 0 15px #f802,
    inset 0 0 10px #000c;
}
.centerView a.centerRoomCard:not(.roomClosed):hover::before,
.centerView a.centerRoomCard:not(.roomClosed):hover::after,
.centerView a.centerRoomCard:not(.roomClosed):focus-visible::before,
.centerView a.centerRoomCard:not(.roomClosed):focus-visible::after {
  border-color: #c70;
}
.centerView .centerRoomCard.roomClosed,
.centerView .centerRoomCard.roomClosed:hover {
  background: #0a0a0ab3;
  border-color: #555;
  filter: grayscale(1);
  box-shadow: inset 0 0 10px #000c;
}
.centerView .accountGrid {
  color: #ddd;
}
.centerView .accountGrid dt {
  color: #aaa;
}
.centerView .formationSlot {
  background: #0a0a0a;
  border-color: #555;
}
.centerView footer {
  margin: 30px auto 0;
  padding: 6px 0 0;
  border-top: 1px solid #333;
  color: #ccc;
  font-size: 13px;
}
#centerMarquees {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.centerMarqueeTrack {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.centerMarqueeContent {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  white-space: nowrap;
  font-weight: bold;
  line-height: 1;
  will-change: transform;
}
.centerMarqueeContent > span {
  display: inline-block;
}
@media (max-width: 600px) {
  .centerView .centerTitle {
    font-size: 17px;
    letter-spacing: 0;
    top: 6px;
  }
  .centerView .heroImage {
    min-height: 112px;
    object-fit: cover;
  }
  .centerView .heroCopy {
    top: auto;
    bottom: 8px;
    font-size: 13px;
  }
  .centerView .centerContent {
    padding: 4px 4px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .centerView .hero::after {
    animation: none;
  }
}

/* Current center layout: compact header, centered cards and account groups. */
.centerView .centerPage {
  width: min(100%, calc(50% + 392px));
  max-width: none;
}
.centerView .hero {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 12px;
  gap: 12px;
}
.centerView .heroImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: url("/img/top-header.png?v-num=104") center/cover no-repeat;
  z-index: 0;
}
.centerView .centerTitle {
  position: relative;
  inset: auto;
  width: 100%;
  padding: 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}
.centerView .heroCopy {
  position: relative;
  inset: auto;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  align-self: flex-end;
  text-align: right;
  overflow-wrap: anywhere;
}
.centerView .roomCards {
  justify-content: center;
}
.centerView .centerRoomCard > strong {
  font-size: 25px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.centerView .roomCardArt {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  background: #000;
  color: #eee;
  font-family: serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 2px;
  min-height: 48px;
  padding: 2px 4px;
}
.centerView #formationOpen {
  display: flex;
  flex: 0 1 156px;
  width: 156px;
  padding: 8px;
  font: inherit;
  background: #0a0a0ab3;
  border: 1px solid #555;
  color: #ddd;
  border-radius: 2px;
}
.centerView #formationOpen:hover,
.centerView #formationOpen:focus-visible {
  background: #c8640026;
  border-color: #c70;
  box-shadow:
    0 0 15px #f802,
    inset 0 0 10px #000c;
}
.centerView #formationOpen:hover::before,
.centerView #formationOpen:hover::after {
  border-color: #c70;
}
.centerView .accountGrid {
  justify-content: center;
}
.centerView .accountStats table {
  margin: 0 auto;
}
.centerView #roomEmpty,
.centerView #formationNotice {
  text-align: center;
}
.centerView .roomSection {
  margin-top: 12px;
}
.centerView .formationSlot {
  position: relative;
  border-radius: 2px;
}
.centerView #formationBack,
.centerView .formationSlot button {
  background: #141414cc;
  border-color: #555;
  border-radius: 2px;
  color: #ddd;
}
.centerView #formationBack:hover,
.centerView .formationSlot button:hover:not(:disabled) {
  background: #c8640026;
  border-color: #c70;
}
.centerView .formationSlot::before,
.centerView .formationSlot::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #888;
  pointer-events: none;
}
.centerView .formationSlot::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.centerView .formationSlot::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
@media (max-width: 600px) {
  .centerView .centerTitle {
    font-size: 17px;
  }
  .centerView .hero {
    padding: 6px 8px;
    min-height: 90px;
  }
  .centerView .heroCopy {
    font-size: 12px;
  }
}

/* Compact account details and centered formation entry. */
.centerView .heroCopy {
  font-size: 12px;
  color: #b5b5b5;
}
.centerView #formationOpen {
  justify-content: center;
  align-items: center;
}
.centerView #formationOpen .roomCardArt {
  justify-content: center;
  align-items: center;
  text-align: center;
  letter-spacing: 0;
  background: transparent;
  min-height: 0;
  height: auto;
  margin: 0 0 4px;
}
.centerView .formationIcon {
  display: block;
  font-size: 32px;
  line-height: 1.2;
  filter: grayscale(0.8);
  margin: 2px auto 6px;
}
.centerView .accountGrid {
  font-size: 20px;
  text-align: center;
  gap: 8px 24px;
}
.centerView .accountGrid > div {
  flex-wrap: wrap;
  justify-content: center;
}
.centerView .accountGrid dt {
  font-size: 15px;
}
.centerView .accountLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0;
  text-align: center;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.centerView .accountLinks[hidden] {
  display: none;
}
.centerView #authNotice {
  padding: 0;
  margin: 8px 0 4px;
  background: none;
  border: 0;
  color: #aaa;
  text-align: center;
}
.centerView #guestLinks {
  font-size: 16px;
  margin: 4px 0 12px;
}
.centerView .accountStats {
  max-width: 760px;
  container-type: inline-size;
  overflow: visible;
  margin: 12px auto 0;
}
.centerView .accountStats table {
  max-width: none;
  table-layout: auto;
}
.centerView .accountStats caption {
  text-align: center;
  font-size: 18px;
}
.centerView .accountStats th,
.centerView .accountStats td {
  padding: 7px 6px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.centerView .accountStats thead th {
  font-size: 15px;
}
.centerView .accountStats tbody th {
  font-size: 17px;
}
.centerView .accountStats tbody td {
  font-size: 20px;
}
.centerView .rankIcon {
  display: inline-block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin-right: 5px;
  vertical-align: middle;
}
.centerView .rankLabel {
  display: inline-block;
  vertical-align: middle;
}
@container (max-width:600px) {
  .centerView .accountStats .statsDetail {
    display: none;
  }
}
@container (max-width:400px) {
  .centerView .accountStats th,
  .centerView .accountStats td {
    padding: 6px 3px;
  }
  .centerView .accountStats tbody td {
    font-size: 18px;
  }
  .centerView .accountStats tbody th {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .centerView .heroCopy {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #centerMarquees {
    display: none;
  }
}

.centerView #memberLinks {
  flex-direction: column;
  align-items: center;
}

.centerView .accountLinks {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.centerView .accountLinks a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border: 1px solid #455a63;
  border-radius: 3px;
  background: #102029;
  color: #d5e4e9;
  text-decoration: none;
  text-align: left;
  line-height: 1.5;
}
.centerView .accountLinks a::after {
  content: "\2192";
  flex-shrink: 0;
  color: #91b5bf;
}
.centerView .accountLinks a:hover,
.centerView .accountLinks a:focus-visible {
  background: #1a303b;
  border-color: #82aab9;
  color: #fff;
}

.centerView .postedCard {
  justify-content: flex-start;
  cursor: default;
  align-self: flex-start;
}
.centerView a.postedCard {
  cursor: pointer;
}
.centerView .postedCard > strong {
  font-size: 15px;
  margin-top: 6px;
}
.centerView .postedCard p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
  margin: 4px 0;
  text-align: left;
}
.centerView .postedCard img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.postComposer {
  margin: 16px auto;
  max-width: 540px;
  border: 1px solid #455a63;
  padding: 10px 14px;
  background: #10191f;
}
.postComposer summary {
  cursor: pointer;
  color: #c5dce4;
}
.postComposer form {
  display: grid;
  gap: 10px;
  padding-top: 14px;
}
.postComposer label {
  display: grid;
  gap: 5px;
}
.postComposer label[hidden] {
  display: none;
}
.postComposer input,
.postComposer textarea,
.postComposer select {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  background: #080f13;
  color: #eee;
  border: 1px solid #52616b;
  padding: 8px;
  font: inherit;
}
.postComposer p {
  margin: 0;
  font-size: 13px;
  color: #b9c6ca;
}
.postComposer button,
#stockRefresh {
  background: #102029;
  border: 1px solid #455a63;
  color: #d5e4e9;
  padding: 7px 12px;
  cursor: pointer;
}
.postComposer button:disabled {
  opacity: 0.5;
  cursor: wait;
}
#stockRefresh {
  font-size: 12px;
  padding: 3px 8px;
}

/* Account-sized headings, compact identities and the short-lived center chat. */
.accountStats {
  margin-top: 20px;
}
.stockGameNote,
.chatTerms {
  font-size: 13px;
  color: var(--muted);
}
#roomEntryNotice:empty,
#chatNotice:empty {
  display: none;
}
.roomNoStock {
  opacity: 0.55;
  cursor: default;
}
.identityLine {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.5;
}
.identityLine > span {
  display: inline-block;
  white-space: nowrap;
}
.postedCard small {
  color: var(--muted);
}
#chatPanel {
  margin-top: 24px;
}
#chatMessages {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  overflow-anchor: auto;
}
.chatMessage {
  padding: 8px 12px;
  border-left: 2px solid #49646b;
  background: #0c141b;
  min-width: 0;
}
.chatMessage small {
  color: var(--muted);
}
.chatMessage p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
#chatForm {
  margin-top: 12px;
  font-size: 14px;
}
.chatInput {
  display: flex;
  gap: 8px;
}
.chatInput input {
  min-width: 0;
  flex: 1;
  background: #101a22;
  color: #e3ebef;
  border: 1px solid #526573;
  padding: 8px;
  font: inherit;
}
.chatInput button {
  border: 1px solid #526573;
  background: #172832;
  color: #e3ebef;
  padding: 6px 16px;
}
.centerView:has(#formationPanel:not([hidden])) #statsPanel,
.centerView:has(#formationPanel:not([hidden])) #chatPanel {
  display: none;
}

/* Full-width section heading, compact chat author and sponsored rooms. */
#statsPanel {
  margin-top: 20px;
}
.chatAuthor {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.chatAuthor .identityLine {
  width: auto;
  max-width: 50%;
  flex: 0 1 auto;
}
.classicLink {
  display: inline-block;
  font-size: 13px;
  color: #a7bbc6;
  margin: 4px 0;
}
.sponsorBadge {
  display: block;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: #fff0ae;
  background: #3c351b;
  padding: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.sponsorBadge[hidden] {
  display: none;
}
.centerRoomCard.sponsoredRoom {
  border-color: #b9a465;
}
.centerView:has(#formationPanel:not([hidden])) #sponsorComposer {
  display: none;
}

/* Orb Ship Front surface language. Geometry and board interaction stay unchanged. */
:root {
  --hud-edge: #555;
  --hud-ink: #eee;
  --hud-accent: #ff8800;
  --hud-surface:
    linear-gradient(180deg, #ffffff20, transparent 48%, #00000040), #292929;
  --hud-hover:
    linear-gradient(180deg, #ffffff20, transparent 48%, #00000040), #443323;
}

.centerView button:not(.formSquare):not(#formationOpen),
.centerView .accountLinks a {
  background: var(--hud-surface);
  border-color: var(--hud-edge);
  color: var(--hud-ink);
  box-shadow:
    inset 0 1px #ffffff35,
    inset 0 -1px #0009,
    inset 0 0 0 3px #0002;
  text-shadow: 0 1px 2px #000;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.centerView button:not(.formSquare):not(#formationOpen):not(:disabled):hover,
.centerView .accountLinks a:hover {
  background: var(--hud-hover);
  border-color: #c70;
  box-shadow:
    inset 0 1px #ffffff35,
    0 0 8px #ff880020;
}
.centerView button:not(.formSquare):not(#formationOpen):disabled {
  background: #202020;
  color: #888;
  box-shadow: none;
}
.centerView .accountLinks a::after {
  color: var(--hud-accent);
  text-shadow: 0 1px #000;
}
.centerView .postComposer {
  position: relative;
  background: linear-gradient(135deg, #ffffff05, transparent 55%), #101010;
  border-color: #555;
  box-shadow: inset 0 0 12px #0008;
}
.centerView .postComposer::before,
.centerView .postComposer::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  border: 2px solid #777;
}
.centerView .postComposer::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.centerView .postComposer::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
.centerView .postComposer summary {
  color: #ddd;
}
.centerView .postComposer summary::marker {
  color: #c70;
}
.centerView .postComposer input,
.centerView .postComposer textarea,
.centerView .postComposer select,
.centerView .chatInput input {
  background: #090b0b;
  border-color: #555;
  box-shadow: inset 0 2px 5px #0008;
}
.centerView :is(input, textarea, select):focus-visible {
  outline: 2px solid #c70;
  outline-offset: 2px;
}
.centerView .chatMessage {
  background: linear-gradient(110deg, #ffffff05, transparent), #101313;
  border-left-color: #57735e;
}
.centerView .chatAuthor strong {
  color: #eee;
}
.centerView .chatMessage small {
  color: #96a798;
}
.centerView .formationSlot {
  background: linear-gradient(135deg, #ffffff07, transparent 60%), #101010;
  box-shadow: inset 0 0 10px #0008;
}
.centerView .accountStats thead {
  background: linear-gradient(#ffffff09, transparent), #161a1a;
}
.centerView .accountStats tbody td {
  font-variant-numeric: tabular-nums;
}
.centerView .sponsorBadge {
  border-left: 0;
  background: linear-gradient(110deg, #4a3a18, #211d14);
  color: #ffe4a0;
}
@media (prefers-reduced-motion: reduce) {
  .centerView button,
  .centerView a,
  .centerView .centerRoomCard {
    transition: none;
  }
}

/* Wider cards, bounded previews, and a readable full-message dialog. */
.centerView .centerRoomCard,
.centerView #formationOpen {
  flex-basis: 188px;
  width: 188px;
}
.centerView .postedCard .postRead {
  font-size: 13px;
}
.centerView .postedCard p {
  overflow: hidden;
}
.postDialog {
  width: 560px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 24px;
  background: #171c1b;
  color: #eee;
  border: 1px solid #888;
  box-shadow: 0 8px 30px #0008;
}
.postDialog::backdrop {
  background: #0006;
}
.postDialog h2 {
  margin: 0 0 12px;
  border-left: 4px solid #c70;
  padding-left: 12px;
  font-size: 22px;
}
#postFullAuthor {
  color: #a8bbaa;
  overflow-wrap: anywhere;
}
#postFullText {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.centerView .roomCredits {
  margin-top: 24px;
  font-size: 14px;
  color: #bdc8c0;
  border-top: 1px solid #333;
  padding: 12px;
}
.centerView .roomCredits h2 {
  font-size: 18px;
  border-left: 5px solid #0066aa;
  padding: 5px 12px;
  background: linear-gradient(90deg, #2050b433, transparent);
}

/* Keep the full-text action outside the bounded preview. */
.centerView .postedCard {
  display: flex;
  flex-direction: column;
}
.centerView .postedCard .postRead {
  flex-shrink: 0;
  min-height: 32px;
  margin-top: 10px;
  white-space: normal;
}
.centerView .postedCard p {
  flex-shrink: 0;
  max-height: none;
}

.adminMessage {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 6px 8px;
  margin: 0 0 6px;
  font-size: 14px;
  border: 1px solid #589779;
  background: #143d2b;
  color: #eefbf4;
}
.adminMessage[data-kind="a"] {
  border-color: #bf6868;
  background: #4b2228;
  color: #fff0ef;
}

.roomSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 6px 0;
}
.roomSummary .stockGameNote {
  margin: 0;
  min-width: 0;
}
.centerView .roomSummary .centerConnections {
  margin: 0 0 0 auto;
  white-space: nowrap;
}

/* Guest identity notice does not block game input. */
.guestToast {
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border: 1px solid #50776b;
  background: #122b25;
  color: #effff6;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 4px 16px #0008;
  pointer-events: none;
}
.guestToast[hidden] {
  display: none;
}

/* Keep the formation editor focused and its saved-position cards compact. */
.formationEditing #postComposer {
  display: none !important;
}
.centerView .formationSlots {
  gap: 10px;
  margin: 12px 0;
}
.centerView .formationSlot {
  padding: 6px;
}
.centerView .formationSlot button {
  margin-top: 6px;
  padding: 5px 10px;
}
.centerView .formationSlot .formPreview:not(.formationBoard) {
  padding: 12px 0;
}

/* Equal side columns keep the action buttons centered beside the right counter. */
.formationControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}
.formationControls .actions {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0;
}
.formationControls .actions button {
  white-space: nowrap;
}
.formationControls #formationCount {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .formationControls {
    font-size: 12px;
  }
  .formationControls .actions {
    gap: 4px;
  }
  .formationControls .actions button {
    padding: 7px 5px;
  }
}

.roomHeading {
  position: relative;
  margin-bottom: 16px;
}
.centerView .roomHeading h2 {
  margin-bottom: 0;
  padding-right: 155px;
  min-height: 38px;
}
.centerView .roomHeading .centerConnections {
  position: absolute;
  right: 12px;
  bottom: 5px;
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
}
#globalMagic {
  margin-top: 24px;
}
#globalMagic:has(#postComposer[hidden]):has(#sponsorComposer[hidden]),
.formationEditing #globalMagic {
  display: none;
}
@media (max-width: 600px) {
  .centerView .roomHeading h2 {
    padding-right: 14px;
    padding-bottom: 24px;
  }
  .centerView .roomHeading .centerConnections {
    bottom: 4px;
  }
}

.centerView #memberLinks {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px 12px;
}
.centerView #memberLinks a {
  flex: 0 1 auto;
}
.centerView .accountStats tbody td {
  font-weight: 700;
}

/* Compact, softer guest account links, wrapping only when space requires it. */
.centerView #guestLinks {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px 12px;
}
.centerView #guestLinks a {
  flex: 0 1 auto;
  white-space: nowrap;
  min-height: 36px;
  padding: 5px 12px;
  gap: 10px;
  border-color: #555b60;
  border-radius: 7px;
  background: #282c2f;
  box-shadow: none;
  text-shadow: none;
}
.centerView #guestLinks a:hover,
.centerView #guestLinks a:focus-visible {
  background: #353a3e;
  border-color: #929b9f;
  box-shadow: none;
  color: #fff;
}
.centerView #guestLinks a:focus-visible {
  outline: 2px solid #c99560;
  outline-offset: 2px;
}
.centerView #guestLinks a::after {
  color: #d0aa7f;
  text-shadow: none;
}

.centerView #guestLinks .guestStatus {
  flex: 0 0 100%;
  margin: 0;
  text-align: center;
  color: #ccc;
}

.recentKifuList {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recentKifuList li + li {
  border-top: 1px solid var(--line);
}
.recentKifuList a {
  display: grid;
  gap: 6px;
  padding: 10px;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: var(--panel);
}
.recentKifuList a:hover {
  background: #20303a;
}
.recentKifuList time {
  font-size: 13px;
  color: var(--muted);
}
.kifuPlayers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.recentKifuList {
  max-width: 760px;
  margin: 0 auto;
}
.kifuPlayer {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 3px 8px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 14px 10px 8px;
}
.kifuWinner {
  border-color: #d4b565;
  background: #b9982820;
}
.kifuWinnerBadge {
  position: absolute;
  right: 8px;
  top: -9px;
  padding: 0 5px;
  border-radius: 3px;
  background: #33301d;
  color: #ffe4a0;
  font-size: 11px;
  font-weight: bold;
}
.kifuSide {
  grid-column: 1;
  grid-row: 3;
  color: #aecbd9;
  font-size: 12px;
  text-align: center;
}
.kifuInsignia {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  object-fit: contain;
  align-self: center;
}
.kifuName {
  grid-column: 2;
  grid-row: 1;
}
.kifuUser {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: var(--muted);
}
.kifuStats {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  font-size: 13px;
}
.kifuRate {
  white-space: nowrap;
}
.kifuVs {
  align-self: center;
  color: #d4b565;
  font-size: 25px;
  font-weight: bold;
  font-style: italic;
}
.kifuOutcome {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 14px;
}
.kifuOutcome small {
  font-size: 11px;
  color: var(--muted);
}
@media (max-width: 480px) {
  .kifuPlayers {
    gap: 5px;
  }
  .recentKifuList a {
    padding: 10px 3px;
  }
  .kifuPlayer {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px 4px;
    padding: 12px 4px 6px;
  }
  .kifuInsignia {
    width: 28px;
    height: 32px;
  }
  .kifuVs {
    font-size: 18px;
  }
  .kifuStats {
    grid-column: 1 / span 2;
    grid-row: 4;
    justify-content: center;
  }
  .kifuSide {
    grid-row: 3;
  }
}

/* Kifu links retain a card appearance in every interaction state. */
.centerView .recentKifuList a,
.centerView .recentKifuList a:visited,
.centerView .recentKifuList a:hover,
.centerView .recentKifuList a:focus-visible {
  color: #fff;
  text-decoration: none;
  border: 1px solid #35434a;
  border-radius: 6px;
}
.centerView .recentKifuList a:hover,
.centerView .recentKifuList a:focus-visible {
  border-color: #73909e;
  background: #20303a;
}
.recentKifuList li + li { border-top: 0; margin-top: 8px; }
@media (min-width: 601px) {
  .kifuVs { padding-right: 18px; }
}

/* Preserve the existing row height while making regulation text easier to read. */
.centerView .centerRoomCard .roomRules {
  font-size: 13px;
  line-height: 18px;
}