/* Presentation only. Shared by the center and room; no game-state changes. */
:root {
  color-scheme: light;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #20251f;
  background: #ffffff;
  --line: #c3cec1;
  --muted: #52604f;
  --blue: #202f36;
  --green: #286339;
  --panel: #ffffff;
  --wood: #e6bd7c;
  --wood-line: #85704e;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(#edf1e9 0.65px, transparent 0.8px) 0 0/8px 8px;
  font-size: 16px;
  line-height: 1.6;
}
a {
  color: #202f36;
}
button,
a {
  touch-action: manipulation;
}
button {
  font: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #365d9b;
  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: #20251f;
  opacity: 0.65;
  pointer-events: none;
  z-index: -0;
}
.edge span {
  font-size: 18px;
  color: #315b38;
}
.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: #f3fcf1ed;
  border: 1px solid #c3cec1;
  min-height: 690px;
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 205px;
  padding: 30px 34px;
  border-bottom: 3px double #c3cec1;
  background:
    repeating-linear-gradient(0deg, #153f2944 0 1px, transparent 1px 4px),
    linear-gradient(115deg, #153f29, #153f29 56%, #153f29);
}
.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 #ffffff00;
}
.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, #153f294d 63px 65px),
    repeating-linear-gradient(90deg, transparent 0 62px, #153f294d 63px 65px);
  opacity: 0.55;
}
.heroGrid span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 82px;
  height: 94px;
  border: 1px solid #c3cec1;
  background: #153f29e0;
  color: #ffffff;
  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: #20251f;
}
.sectionTitle,
.roomSection h2 {
  margin: 0 0 16px;
  padding: 7px 14px;
  border-left: 4px solid var(--blue);
  background: linear-gradient(90deg, #e9eee6, #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 #c3cec1;
  background: #f3fcf1;
  font-size: 14px;
}
.notice[data-state="ok"] {
  border-color: var(--green);
  background: #f3fcf1;
  color: #20251f;
}
.notice[data-state="ng"] {
  border-color: #c3cec1;
  background: #f3fcf1;
  color: #b52b28;
}
.roomSection {
  margin-top: 30px;
}
.roomList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  color: #20251f;
  padding: 4px 0 12px;
}
.roomButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 20px;
  border: 1px solid #c3cec1;
  border-left: 3px solid var(--green);
  background: linear-gradient(115deg, #f7faf3, #f7faf3);
  color: #20251f;
  text-decoration: none;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.roomButton::after {
  content: "›";
  font-size: 24px;
  color: var(--green);
}
.roomButton:hover {
  border-color: #8cb890;
  background: #e1efdd;
}
footer {
  text-align: center;
  margin-top: 22px;
  border-top: 1px solid #c3cec1;
  padding: 14px;
  font-size: 12px;
  color: #20251f;
}
footer span {
  color: #20251f;
  margin-left: 10px;
}
.roomPage {
  position: relative;
  width: min(1430px, calc(100% - 160px));
  margin: 0 auto;
  padding: 12px 0 28px;
}
.roomCard {
  border: 1px solid #c3cec1;
  background: #f3fcf1f5;
  min-height: 700px;
}
.roomHeader {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, #153f2933 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #153f29, #153f29);
}
.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: #f7faf3;
}
.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: #20251f;
}
.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 #c3cec1;
  border-radius: 0;
  background: linear-gradient(#f0f7e9, #f0f7e9);
  color: #202f36;
  text-decoration: none;
}
.actions button:hover,
.actions a:hover,
.gameToolbar button:not(:disabled):hover {
  border-color: #8cb890;
  background: #e1efdd;
}
.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 #c3cec1;
  background: linear-gradient(135deg, #ebc67f, #ebc67f);
  box-shadow: inset 0 0 0 3px #52634b26;
}
.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 #c3cec1;
  background: linear-gradient(90deg, #c49a63, #c49a63);
  padding: 4px;
  min-width: 0;
}
.railLabel {
  display: block;
  color: #20251f;
  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 #c3cec1;
  border-left: 3px solid #c3cec1;
  background: linear-gradient(115deg, #ffffff, #ffffff);
}
.playerBar.self {
  border-left-color: var(--green);
  background: linear-gradient(115deg, #eef4e7, #eef4e7);
}
.playerBar > span {
  display: block;
  overflow-wrap: anywhere;
}
.playerBar > span:not(.eyebrow) {
  font-weight: 700;
}
.timeLine {
  display: flex;
  gap: 7px;
  align-items: baseline;
  color: #20251f;
  font-size: 12px;
  margin-top: 5px;
}
.clock {
  font-size: 34px;
  line-height: 1.3;
  color: #20251f;
  font-variant-numeric: tabular-nums;
}
.clock.lowTime {
  color: #b52b28;
}
.gameMessage {
  min-height: 130px;
  border: 1px solid #c3cec1;
  background: #ffffef;
  padding: 14px 12px;
  font-size: 14px;
}
.gameMessage p {
  margin: 0;
}
.gameMessage p + p:not(:empty) {
  margin-top: 12px;
  color: #20251f;
}
.promotion {
  position: absolute;
  border: 2px solid #c3cec1;
  background: #f3fcf1;
  box-shadow: 0 12px 32px #52634b26;
}
.promotion p {
  margin: 0;
}
.statePanel {
  padding: 24px;
  border: 1px solid #c3cec1;
  background: linear-gradient(110deg, #f3fcf1, #f3fcf1);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.statePanel h2 {
  font-size: 26px;
  margin: 0 0 12px;
}
.resultPanel {
  margin-top: 16px;
  border-left: 3px solid #c3cec1;
}
.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 #c3cec1;
  background: #f3fcf1;
  color: #20251f;
  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);
}
.centerView .centerCard {
  min-height: 0;
}
.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 #c3cec1;
  overflow-wrap: anywhere;
}
.roomTable a {
  font-weight: 600;
  text-decoration: none;
}
.roomTable a:hover {
  text-decoration: underline;
}
.roomTable .roomRules {
  font-size: 12px;
  color: #286339;
  white-space: normal;
}
.queueClock circle {
  stroke: #20251f;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.queueClock circle:nth-child(2) {
  stroke: #20251f;
}
.queueClock circle:nth-child(3) {
  stroke: #20251f;
}
@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 #c3cec1;
  background: #f7faf3;
  color: #20251f;
  text-decoration: none;
}
.roomTable .roomEntry:hover {
  border-color: #8cb890;
  background: #e1efdd;
  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 #c3cec1;
  background: #f3fcf1;
  color: #202f36;
  text-decoration: none;
}
.centerRoomCard:hover,
.centerRoomCard:focus-visible {
  background: #e1efdd;
  border-color: #8cb890;
  text-decoration: none;
}
.roomCount {
  color: #20251f;
}
.centerRoomCard .roomRules {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ruleSeparator {
  color: #20251f;
}
.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: round;
}
.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, #f3fcf1, #f3fcf1 65%);
  box-shadow:
    0 12px 36px #52634b26,
    inset 0 1px #52634b26;
}
.queueDial {
  width: min(260px, 100%);
}
.queueRules {
  position: static;
  display: grid;
  gap: 0;
  text-align: center;
}
.queueRules > div {
  border-bottom: 1px solid #c3cec120;
}
.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 #c3cec1;
  border-radius: 12px;
  background: linear-gradient(145deg, #f3fcf1, #f3fcf1 65%);
  box-shadow: 0 8px 20px #52634b26;
  text-align: center;
  overflow-wrap: anywhere;
}
.roomCardArt {
  display: grid;
  place-items: center;
  width: 100%;
  background:
    radial-gradient(ellipse, #eeedf950, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 25px, #eeedf910 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 25px, #eeedf910 25px 26px);
  color: #20251f;
  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 #c3cec120;
}
.roomCardAction {
  display: block;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid #c3cec155;
  color: #315b38;
}
.centerRoomCard:hover,
.centerRoomCard:focus-visible {
  background: linear-gradient(145deg, #e1efdd, #e1efdd 65%);
  border-color: #8cb890;
}
.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 #c3cec155;
  border-radius: 4px;
  background: #153f2908;
  color: #202f36;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
}
.roomHeader .backLink::before {
  content: "‹";
  font-size: 21px;
  line-height: 1;
  color: #202f36;
}
.roomHeader .backLink:hover {
  color: #202f36;
  border-color: #8cb89088;
  background: #153f2912;
}
.roomHeader .backLink:focus-visible {
  outline: 2px solid #365d9b;
  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: #20251f;
  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: #286339;
  margin-top: 5px;
}
.roomLifetime.closingSoon {
  color: #b52b28;
}
.centerRoomCard.roomClosed {
  cursor: default;
  border-color: #c3cec1;
}
.centerRoomCard.roomClosed:hover {
  background: linear-gradient(145deg, #e1efdd, #e1efdd 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 {
  margin-top: 12px;
}
.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 #c3cec1;
}
.accountStats th:first-child {
  text-align: left;
  white-space: nowrap;
}
.accountStats thead th {
  color: #20251f;
  font-size: 12px;
  font-weight: 400;
}
.accountStats tbody th {
  font-size: 13px;
  font-weight: 400;
}
.accountStats tbody td {
  font-size: 14px;
}
.accountStats p {
  color: #20251f;
  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: transparent;
}
.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: #20251f;
  font-weight: 700;
}
#resultSave {
  color: #20251f;
  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. */
.gameInfo .playerBar {
  padding-top: 16px;
  padding-bottom: 16px;
}
.playerBar > span:not(.eyebrow) {
  font-size: 24px;
}
.playerBar .timeLine {
  font-size: 16px;
}
.playerBar .clock {
  font-size: 46px;
}

/* 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: #f3fcf1;
  border: 1px solid #c3cec1;
  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: #8cb890;
}
#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: #f0f7e9;
  color: #20251f;
  border: 1px solid #c3cec1;
  cursor: pointer;
}
#formationOpen:hover,
#formationBack:hover,
.formationSlot button:hover {
  background: #e1efdd;
}
.formationSlot button:disabled {
  opacity: 0.4;
  cursor: default;
}
#formationBack {
  font-size: 14px;
  padding: 5px 9px;
}

/* Shared reference palette, with a compact header and unchanged board colors. */
body.roomView {
  padding: 4px 8px 0;
  background-color: #f6f9ef;
  color: #20251f;
  background-image: radial-gradient(#f6f9ef 1px, transparent 1px);
  background-size: 8px 8px;
  font-family:
    "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    sans-serif;
}
.roomView .roomPage {
  width: min(100%, calc(50% + 392px));
  max-width: none;
  padding: 0 0 24px;
  z-index: 1;
}
.roomView .roomCard {
  position: relative;
  background: #e8efb8dd;
  border: 1px solid #c3cec1;
  box-shadow:
    0 0 15px #52634b26,
    inset 0 0 20px #52634b26;
  min-height: 0;
}
.roomView .roomCard::before,
.roomView .roomCard::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #c3cec1;
  pointer-events: none;
  z-index: 2;
}
.roomView .roomCard::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.roomView .roomCard::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
.roomView .roomHeader {
  grid-template-columns: minmax(76px, 1fr) minmax(0, auto) minmax(76px, 1fr);
  gap: 4px;
  padding: 3px 8px;
  border-color: #c3cec1;
  background:
    repeating-linear-gradient(0deg, #153f2944 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #153f29, #153f29);
}
.roomView .roomHeader .roomTitle {
  font-size: 16px;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
}
.roomView .roomHeader .backLink {
  font-size: 11px;
  padding: 2px 5px;
  gap: 4px;
  letter-spacing: 0;
  border-color: #c3cec1;
  color: #202f36;
  background: #153f29aa;
  border-radius: 2px;
}
.roomView .roomHeader .backLink::before {
  font-size: 17px;
}
.roomView .sectionTitle {
  font-size: 17px;
  color: #202f36;
  border-left: 5px solid #c3cec1;
  padding: 4px 10px;
  margin: 8px 0;
  background: linear-gradient(90deg, #e9eee633, transparent);
}
.roomView .roomSidebar {
  background: #f7faf344;
  border-color: #c3cec1;
}
.roomView .statePanel,
.roomView .formationChoice,
.roomView .resultDialog,
.roomView .leaveDialog,
.roomView .promotion {
  position: relative;
  background: #0a0a0a;
  color: #ddd;
  border: 1px solid #555;
  border-radius: 2px;
  box-shadow: inset 0 0 10px #000c;
}
.roomView .resultDialog,
.roomView .leaveDialog {
  position: fixed;
}
.roomView .promotion {
  position: fixed;
}
.roomView #queuePanel {
  background: #f3fcf1;
  border: 1px solid #c3cec1;
  border-radius: 2px;
  box-shadow: inset 0 0 10px #52634b26;
}
.roomView
  :is(
    .statePanel,
    .formationChoice,
    .resultDialog,
    .leaveDialog,
    .promotion
  )::before,
.roomView
  :is(
    .statePanel,
    .formationChoice,
    .resultDialog,
    .leaveDialog,
    .promotion
  )::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #888;
  pointer-events: none;
}
.roomView
  :is(
    .statePanel,
    .formationChoice,
    .resultDialog,
    .leaveDialog,
    .promotion
  )::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.roomView
  :is(
    .statePanel,
    .formationChoice,
    .resultDialog,
    .leaveDialog,
    .promotion
  )::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
.roomView .queueRules {
  color: #286339;
}
.roomView .playerBar,
.roomView .gameMessage {
  background: #ffffffb3;
  border-color: #c3cec1;
  border-radius: 2px;
  box-shadow: inset 0 0 6px #52634b26;
}
.roomView .playerBar.self {
  border-left-color: #c3cec1;
}
.roomView :is(.gameToolbar, .actions) button,
.roomView .actions a {
  background: #f0f7e9cc;
  color: #202f36;
  border: 1px solid #c3cec1;
  border-radius: 2px;
  box-shadow: inset 0 0 5px #52634b26;
}
.roomView :is(.gameToolbar, .actions) button:hover:not(:disabled),
.roomView .actions a:hover,
.roomView .formationChoice:hover,
.roomView .backLink:hover {
  background: #e1efdd26;
  border-color: #8cb890;
  text-decoration: none;
}
.roomView .resultDialog::backdrop {
  background: transparent;
}
.roomView .leaveDialog::backdrop {
  background: #000b;
}
#roomMarquees {
  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) {
  .roomView .roomHeader .roomTitle {
    font-size: 13px;
  }
  .roomView .roomHeader {
    padding: 3px 4px;
  }
  .roomView .roomHeader .backLink {
    font-size: 10px;
  }
}

/* Rank information belongs to the desktop player panel. */
.playerRank {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  color: #20251f;
}
.playerRank img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.playerRank[hidden],
body.tallLayout .playerRank {
  display: none;
}

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

.playerRate {
  font-size: 18px;
  line-height: 1.4;
  margin-top: 5px;
  color: #286339;
  font-variant-numeric: tabular-nums;
}

/* Reserve replay height from the first position, preserving the game's scale. */
.boardColumn {
  min-width: 0;
}
.replaySpace {
  height: var(--replayHeight);
  display: flex;
  justify-content: center;
  align-items: center;
}
#replayControls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}
#replayControls button {
  padding: 4px 10px;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid #c3cec1;
  background: #f0f7e9;
  color: #20251f;
}
#replayControls button:disabled {
  opacity: 0.4;
}
#replayControls button:not(:disabled):hover {
  background: #e1efdd;
}
.gameArea:has(#replayControls:not([hidden])) #resign {
  visibility: hidden;
}
.tallLayout.hasGame .boardColumn {
  grid-row: 2;
}
.tallLayout.hasGame .boardColumn .boardFrame {
  grid-row: auto;
}
.playerBar #myName,
.playerBar #otherName,
.playerId {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.4;
}
.identityText {
  display: inline-block;
  white-space: nowrap;
}
.playerId {
  color: var(--muted);
  font-size: 14px;
  margin: 2px 0;
}
#stockGameNote {
  font-size: 12px;
  color: var(--muted);
}
#queueReturn p {
  font-size: 13px;
  color: var(--muted);
}

.roomSponsor {
  margin: 8px 12px;
  padding: 8px 12px;
  border-left: 3px solid #c3cec1;
  background: #fff6ce;
  color: #20251f;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.roomCredits {
  margin: 24px 0 0;
  padding: 16px;
  border-top: 1px solid #c3cec1;
  font-size: 14px;
  color: #52604f;
  background: #f7faf3e8;
}
.roomCredits h2 {
  font-size: 17px;
  margin-top: 16px;
}

/* Orb Ship Front surface language. Geometry and board interaction stay unchanged. */
:root {
  --hud-edge: #c3cec1;
  --hud-ink: #20251f;
  --hud-accent: #202f36;
  --hud-surface:
    linear-gradient(180deg, #ffffff20, transparent 48%, #eff7e940), #eff7e9;
  --hud-hover:
    linear-gradient(180deg, #ffffff20, transparent 48%, #e3f0df40), #e3f0df;
}

.roomView .actions button,
.roomView .actions a,
.roomView .gameToolbar button,
.roomView #replayControls button,
.roomView .backLink {
  background: var(--hud-surface);
  border: 1px solid var(--hud-edge);
  color: var(--hud-ink);
  box-shadow:
    inset 0 1px #52634b26,
    inset 0 -1px #52634b26,
    inset 0 0 0 3px #52634b22;
  text-shadow: 0 1px 2px #ffffff00;
  text-decoration: none;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.roomView .actions button:not(:disabled):hover,
.roomView .actions a:hover,
.roomView .gameToolbar button:not(:disabled):hover,
.roomView #replayControls button:not(:disabled):hover,
.roomView .backLink:hover {
  background: var(--hud-hover);
  border-color: #8cb890;
  box-shadow:
    inset 0 1px #52634b26,
    0 0 8px #52634b20;
}
.roomView button:focus-visible,
.roomView a:focus-visible {
  outline: 2px solid #365d9b;
  outline-offset: 3px;
}
.roomView .gameToolbar button:disabled,
.roomView .actions button:disabled,
.roomView #replayControls button:disabled {
  background: #f0f7e9;
  color: #20251f;
  box-shadow: none;
}
.roomView .backLink::before {
  color: var(--hud-accent);
}
.roomView #queuePanel,
.roomView .formationChoice {
  position: relative;
  background: linear-gradient(135deg, #ffffff08, transparent 55%), #f3fcf1;
  border: 1px solid #c3cec1;
  box-shadow: inset 0 0 12px #52634b26;
}
.roomView #queuePanel::before,
.roomView #queuePanel::after,
.roomView .formationChoice::before,
.roomView .formationChoice::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  border: 2px solid #c3cec1;
}
.roomView #queuePanel::before,
.roomView .formationChoice::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.roomView #queuePanel::after,
.roomView .formationChoice::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
.roomView .formationChoice:not(:disabled):hover {
  border-color: #8cb890;
  background: #e1efdd;
}
.roomView .formationChoice:not(:disabled):hover::before,
.roomView .formationChoice:not(:disabled):hover::after {
  border-color: #8cb890;
}
.roomView .queueRules {
  color: #286339;
}
.roomView .queueElapsed {
  color: #20251f;
  font-variant-numeric: tabular-nums;
}
.roomView .playerBar {
  background:
    linear-gradient(120deg, #ffffff0b, transparent 60%),
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px),
    #ffffff;
  border-color: #c3cec1;
  border-left-color: #c3cec1;
  box-shadow:
    inset 0 1px #52634b12,
    inset 0 -8px 18px #52634b26;
}
.roomView .playerBar.self {
  background:
    linear-gradient(120deg, #ffffff0b, transparent 60%),
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px),
    #eef4e7;
  border-left-color: #c3cec1;
}
.roomView .playerBar .clock {
  color: #20251f;
  text-shadow: 0 2px 3px #ffffff00;
}
.roomView .playerBar .clock.lowTime {
  color: #b52b28;
}
.roomView .playerId {
  color: #52604f;
}
.roomView .playerRate {
  color: #286339;
}
.roomView .gameMessage {
  background: linear-gradient(110deg, #ffffff06, transparent), #ffffef;
  border-color: #c3cec1;
  box-shadow: inset 0 0 10px #52634b26;
}
.roomView #gameRules {
  color: #286339;
}
.roomView .promotion,
.roomView .leaveDialog {
  background: linear-gradient(130deg, #ffffff09, transparent 65%), #f3fcf1;
  border: 1px solid #c3cec1;
  box-shadow:
    0 8px 24px #52634b26,
    inset 0 1px #52634b26;
  color: #20251f;
}
.roomView .promotion > p,
.roomView .leaveDialog h2 {
  border-left: 3px solid #c3cec1;
  padding-left: 10px;
}
.roomView .roomCredits {
  background: #f7faf3;
  border-color: #c3cec1;
}
@media (prefers-reduced-motion: reduce) {
  .roomView button,
  .roomView a {
    transition: none;
  }
}

/* Room information and the result sash follow the reference hierarchy. */
.roomView .roomSidebar .sectionTitle {
  font-size: 18px;
  padding: 5px 12px;
}
.roomView .roomSidebar .statusGrid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  font-size: 17px;
}
.roomView.hasGame .roomSidebar {
  display: none;
}
.roomView .playerRank img {
  width: 48px;
  height: 48px;
}
.roomView .playerId {
  font-size: 16px;
  color: #52604f;
}
.roomView .gameToolbar {
  padding-top: 0;
  margin-top: 0;
}
/* Shared result typography and rank images. */
.roomView .resultDialog {
  font-size: 20px;
  font-weight: 700;
}
.roomView .resultDialog #resultTitle {
  position: relative;
  transform-origin: center;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.3;
  text-shadow: 0 3px 5px #0009;
}
.roomView .resultDialog[data-outcome="win"] #resultTitle {
  color: #f1fff8;
}
.roomView #resultSave {
  font-size: 17px;
  font-weight: 700;
}
.roomView .resultDialog .actions :is(button, a) {
  font-size: 18px;
  font-weight: 700;
}
.resultRank {
  display: flex;
  align-items: center;
  gap: 14px;
}
.resultRank img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}
.resultRank p {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .roomView .resultDialog {
    font-size: 18px;
  }
  .roomView .resultDialog .actions :is(button, a) {
    font-size: 16px;
  }
  .resultRank img {
    width: 48px;
    height: 48px;
  }
}

/* Result fan: bounded ribbons with cut ends, centered independently of viewport width. */
.roomView .resultDialog {
  width: 980px;
  max-width: calc(100vw - 24px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  color: #fff;
}
.roomView .resultDialog::before,
.roomView .resultDialog::after {
  display: none;
}
.resultFan {
  position: relative;
  height: 420px;
  rotate: var(--result-tilt, 0deg);
  translate: 0 var(--result-offset-y, 0px);
  transform-origin: center 65%;
}
.roomView .resultDialog #ratingDetails {
  border: 0;
}
.roomView .resultBand {
  --band: #086848;
  position: absolute;
  isolation: isolate;
  box-sizing: border-box;
  left: 0;
  width: 100%;
  height: 420px;
  margin: 0;
  translate: none;
  transform: none;
  transform-origin: -80% 65%;
  background: none !important;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: #fff;
}
.roomView .resultBand::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  width: min(var(--result-band-max-width), 140vw);
  margin-left: calc(min(var(--result-band-max-width), 140vw) / -2);
  top: 0;
  bottom: 0;
  background: var(--band);
  clip-path: polygon(0 43%, 100% -10%, 95% 43%, 3% 60%);
}
.roomView .resultBand > div {
  position: absolute;
  left: 20%;
  right: 8px;
  top: 100px;
  transform-origin: left center;
  rotate: -7deg;
}
.roomView .resultSash {
  top: 0;
  z-index: 3;
}
.roomView .resultDialog[data-outcome="win"] .resultSash {
  --band: #08764f;
}
.roomView .resultDialog[data-outcome="lose"] .resultBand {
  --band: #175678;
}
.roomView .resultDialog[data-outcome="lose"] .resultRate {
  --band: #103e60;
}
.roomView .resultDialog[data-outcome="lose"] .resultTitleBand {
  --band: #092940;
}
.roomView .resultRate {
  --band: #075139;
  top: 0;
}
.roomView .resultRate::before {
  clip-path: polygon(0 61%, 95% 44%, 93% 67%, 2% 69%);
}
.roomView .resultRate > div {
  top: 225px;
  rotate: -2deg;
}
.roomView .resultTitleBand {
  --band: #063c30;
  top: 0;
}
.roomView .resultTitleBand::before {
  clip-path: polygon(0 70%, 93% 68%, 89% 100%, 3% 90%);
}
.roomView .resultTitleBand > div {
  top: 295px;
  rotate: 3deg;
}
.roomView .resultDialog #resultTitle {
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 900;
  text-align: left;
  color: #fff;
  white-space: nowrap;
}
.roomView .resultBand p {
  margin: 8px 0;
  font-size: clamp(15px, 2.3vw, 24px);
  color: #fff;
  overflow-wrap: anywhere;
}
.roomView .resultDialog .rankUp {
  color: #fff;
}
.roomView .resultDialog #resultSave {
  color: #fff;
  text-shadow: 0 1px 4px #000;
  text-align: center;
}
.roomView .resultDialog .actions {
  justify-content: center;
}
.roomView .resultDialog .actions > * {
  background: #f0f7e9;
}
@media (max-width: 600px) {
  .roomView .resultBand > div {
    left: 12%;
    top: 140px;
  }
  .roomView .resultRate > div {
    top: 225px;
  }
  .roomView .resultTitleBand > div {
    top: 290px;
  }
  .roomView .resultDialog .actions {
    gap: 6px;
  }
  .roomView .resultDialog .actions > * {
    padding: 8px;
    font-size: 14px;
  }
  .roomView .resultRank {
    gap: 8px;
  }
}
@media (max-height: 600px) {
  .resultFan {
    height: 300px;
  }
  .roomView .resultBand {
    height: 300px;
  }
  .roomView .resultBand > div {
    top: 70px;
  }
  .roomView .resultRate > div {
    top: 160px;
  }
  .roomView .resultTitleBand > div {
    top: 205px;
  }
  .roomView .resultDialog #resultTitle {
    font-size: 30px;
  }
  .roomView .resultBand p {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roomView .resultDialog .actions :is(button, a) {
    transition: none !important;
  }
}

/* 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 #c3cec1;
  background: #f3fcf1;
  color: #315b38;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 4px 16px #52634b26;
  pointer-events: none;
}
.guestToast[hidden] {
  display: none;
}

/* AI portraits use the operator-managed character images. */
.aiCharacter {
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.aiCharacter[hidden] {
  display: none !important;
}
.playerCharacter {
  display: block;
  width: var(--characterPx);
  height: var(--characterPx);
  margin: 0;
  flex: none;
}
.handCharacter {
  display: none;
}
.tallLayout .playerCharacter {
  display: none;
}
.tallLayout.hasGame .handCharacter:not([hidden]) {
  display: block;
  flex: none;
  width: var(--cellPx);
  height: calc(var(--cellPx) * var(--cellRatio));
}

/* Portrait visibility is also enforced by the active layout in game.js. */
body:not(.tallLayout) .handRail .handCharacter {
  display: none !important;
}
.playerIdentity {
  display: flex;
  align-items: center;
  gap: var(--identityGap);
  min-width: 0;
}
.playerIdentity > span {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

/* Opaque gray backing keeps result navigation readable over the effects. */
.roomView .resultDialog .actions {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 12px auto 0;
  padding: 12px;
  background: #f0f7e9;
  border: 1px solid #c3cec1;
  border-radius: 4px;
}
.roomView .resultDialog .actions :is(button, a) {
  background: #f0f7e9;
  color: #202f36;
  border: 1px solid #c3cec1;
}
.roomView .resultDialog .actions :is(button, a):hover {
  background: #e1efdd;
  border-color: #8cb890;
}

/* Results are non-modal so the header and end-of-game navigation remain usable. */
.roomView .resultDialog {
  position: fixed;
  inset: 0;
  height: max-content;
  margin: auto;
  z-index: 100;
  pointer-events: none;
}
.roomView .resultDialog .actions {
  pointer-events: auto;
}
body.resultVisible .roomHeader,
body.resultVisible .gameToolbar {
  position: relative;
  z-index: 101;
}
.endActions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.endActions a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #c3cec1;
  background: #f0f7e9;
  color: #202f36;
  text-decoration: none;
}
.roomView .timeLine {
  justify-content: flex-end;
  text-align: right;
}
.playerStats {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.roomView .playerStats .playerRate {
  margin: 0;
  font-size: 16px;
  white-space: nowrap;
}
.roomView .playerStats .playerRank:not([hidden]) {
  display: flex;
  min-width: 0;
  font-size: 16px;
  gap: 4px;
}
.playerStats .playerRank span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playerStats .playerRank img {
  flex: none;
}
.tallLayout.hasGame .handCharacter:not([hidden]) {
  width: min(var(--cellPx), var(--handCharacterPx));
  height: min(calc(var(--cellPx) * var(--cellRatio)), var(--handCharacterPx));
}
@media (max-width: 600px) {
  .endActions :is(a, button) {
    padding: 5px 8px;
    font-size: 13px;
  }
  .roomView .playerStats .playerRate,
  .roomView .playerStats .playerRank:not([hidden]) {
    font-size: 13px;
  }
}

/* Two compact text rows keep player statistics easy to scan. */
.roomView .gameInfo .playerBar {
  padding-top: 10px;
  padding-bottom: 10px;
}
.roomView .playerStats {
  display: block;
}
.roomView .playerStats .playerRank:not([hidden]) {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-top: 2px;
}

/* All enabled end-of-game navigation shares the same HUD treatment. */
.roomView .endActions :is(button, a) {
  background: var(--hud-surface);
  border: 1px solid var(--hud-edge);
  color: var(--hud-ink);
  box-shadow:
    inset 0 1px #52634b26,
    inset 0 -1px #52634b26,
    inset 0 0 0 3px #52634b22;
  text-shadow: 0 1px 2px #ffffff00;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  text-decoration: none;
}
.roomView .endActions :is(button, a):not(:disabled):hover {
  background: var(--hud-hover);
  border-color: #8cb890;
  box-shadow:
    inset 0 1px #52634b26,
    0 0 8px #52634b20;
}
.roomView .endActions button:disabled {
  background: #f0f7e9;
  color: #20251f;
  box-shadow: none;
  cursor: default;
}
/* Rays use viewport geometry, independent of the centered result panel. */
@media (prefers-reduced-motion: reduce) {
  .roomView .endActions :is(button, a) {
    transition: none;
  }
}

.matchModeCards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.matchModeCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  flex: 1 1 240px;
  max-width: 360px;
  min-height: 180px;
  padding: 24px;
  background: var(--hud-surface);
  color: var(--hud-ink);
  border: 1px solid var(--hud-edge);
  cursor: pointer;
}
.matchModeCard strong {
  font-size: 21px;
}
.matchModeCard span {
  line-height: 1.7;
}
.matchModeCard:hover {
  background: var(--hud-hover);
  border-color: #8cb890;
}
.matchModeCard:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-height: 460px) {
  .resultFan,
  .roomView .resultBand {
    height: 240px;
  }
  .roomView .resultBand > div {
    top: 60px;
  }
  .roomView .resultRate > div {
    top: 120px;
  }
  .roomView .resultTitleBand > div {
    top: 165px;
  }
  .roomView .resultRank img {
    width: 48px;
    height: 48px;
  }
}

.matchModeCard .matchModeIcon {
  font-size: 48px;
  line-height: 1.1;
  align-self: center;
}
.resultRank.promoted {
  gap: 10px;
}
.resultRank.promoted #resultRankOldIcon {
  width: 40px;
  height: 40px;
  opacity: 0.85;
}
.resultRank.promoted #resultRankIcon {
  width: 76px;
  height: 76px;
}
.resultRank.promoted #rankChange {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}
.resultRank.promoted #rankChange strong {
  font-size: 1.35em;
  white-space: nowrap;
}
.promotionHologram {
  display: inline-block;
  white-space: nowrap;
  font-weight: 900;
  font-size: 1.35em;
  letter-spacing: 0.08em;
  margin-left: 8px;
  color: #fff;
  background: linear-gradient(
    110deg,
    #fff 5%,
    #82ffff 20%,
    #fff 35%,
    #ffb2ff 50%,
    #fff4a3 65%,
    #fff 80%
  );
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 3px #a5ffff);
  animation: promotionShimmer var(--promotion-shimmer) linear infinite;
}
@keyframes promotionShimmer {
  from {
    background-position: 200% 50%;
    filter: drop-shadow(0 0 2px #a5ffff);
  }
  50% {
    filter: drop-shadow(0 0 6px #fff);
  }
  to {
    background-position: -50% 50%;
    filter: drop-shadow(0 0 2px #a5ffff);
  }
}
@media (max-width: 600px), (max-height: 460px) {
  .resultRank.promoted {
    gap: 5px;
  }
  .resultRank.promoted #resultRankOldIcon {
    width: 26px;
    height: 26px;
  }
  .resultRank.promoted #resultRankIcon {
    width: 44px;
    height: 44px;
  }
  .resultRank.promoted #rankChange {
    gap: 2px;
    font-size: 13px;
  }
  .resultRank.promoted #rankChange strong,
  .promotionHologram {
    font-size: 1.2em;
  }
  .promotionHologram {
    margin-left: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .promotionHologram {
    animation: none;
  }
}

.matchModeCard > strong {
  align-self: center;
  text-align: center;
}
.roomView .resultBand::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  width: min(var(--result-band-max-width), 140vw);
  margin-left: calc(min(var(--result-band-max-width), 140vw) / -2);
  top: 0;
  bottom: 0;
  background: #000c;
  translate: 0 8px;
  clip-path: polygon(0 43%, 100% -10%, 95% 43%, 3% 60%);
}
.roomView .resultRate::after {
  clip-path: polygon(0 61%, 95% 44%, 93% 67%, 2% 69%);
}
.roomView .resultTitleBand::after {
  clip-path: polygon(0 70%, 93% 68%, 89% 100%, 3% 90%);
}
.roomView .resultBand > div,
.roomView .resultDialog #resultTitle {
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    0 3px 2px #000,
    0 5px 7px #000c;
}
.resultRank.promoted #resultRankOldName,
.resultRank.promoted #resultRankArrow {
  white-space: nowrap;
  flex-shrink: 0;
}
.resultRank.promoted #resultRankOldName {
  font-size: clamp(15px, 2vw, 23px);
}
.resultRank.promoted .promotionHologram {
  filter: drop-shadow(1px 3px 1px #000) drop-shadow(0 0 7px #bfffff);
  text-shadow: none;
}
@media (max-width: 600px), (max-height: 460px) {
  .resultRank.promoted #resultRankOldName {
    font-size: 12px;
  }
  .resultRank.promoted #resultRankArrow {
    font-size: 13px;
  }
  .resultRank.promoted .promotionHologram {
    font-size: 1.6em;
  }
  .roomView .resultBand::after {
    translate: 0 6px;
  }
}

.resultRank.promoted .promotionHologram {
  font-family:
    "Arial Black", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo",
    sans-serif;
  font-weight: 900;
  font-size: 2.15em;
  translate: 0 -3px;
}
@media (max-width: 600px), (max-height: 460px) {
  .resultRank.promoted .promotionHologram {
    font-size: 1.8em;
    translate: 0 -2px;
  }
}

/* Mobile clocks share the hand rails; replay controls follow the lower rail. */
.handClock {
  display: none;
}
.tallLayout.hasGame .hand {
  flex: 0 0 auto;
}
.tallLayout.hasGame .handClock {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  gap: 1px;
  line-height: 1.2;
}
.tallLayout.hasGame .handClock .clock {
  font-size: 18px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.tallLayout.hasGame .handClock small {
  font-size: 10px;
}
.tallLayout.hasGame .opponentHand .handClock {
  order: 1;
}
.tallLayout.hasGame .opponentHand .hand {
  order: 2;
}
.tallLayout.hasGame .replaySpace {
  grid-row: 4;
}
.tallLayout.hasGame .replaySpace:has(#replayControls[hidden]) {
  display: none;
}
.tallLayout.hasGame .gameInfo {
  grid-row: 5;
}

/* Keep the sponsored-match notice in waiting views, without reserving space in games. */
body.hasGame #roomSponsor,
body.playing #roomSponsor {
  display: none !important;
}
/* Portrait uses the available width; the detailed player cards can scroll below. */
.roomView.tallLayout.hasGame .roomPage {
  width: 100%;
}
.tallLayout.hasGame .matchContent {
  padding: 6px;
}

/* Compact waiting dial: soft static light without adding animated filters. */
.roomView .queueDial {
  border-radius: 50%;
  background: radial-gradient(circle, #f7faf30d 0, #f7faf307 48%, transparent 70%);
}
.roomView .queueRules {
  font-size: 13px;
  line-height: 18px;
}

/* Revision 105: readable ink on the classic green header. */
.roomHeader { color: #ffffff; }
.roomHeader .backLink,
.roomView .roomHeader .backLink { color: #202f36; background: #f0f7e9; }
.roomHeader .backLink:hover { color: #202f36; background: #e1efdd; }

/* Revision 106: palette refinements; geometry and behavior stay unchanged. */
body.roomView {
  background-color: #111;
  background-image: radial-gradient(#333 1px, transparent 1px);
}
.roomView #matchModePick {
  background: #f3fcf1;
  color: #20251f;
  border-color: #c3cec1;
  box-shadow: inset 0 0 10px #52634b26;
}
.roomView .promotion {
  background: linear-gradient(130deg, #ffffff09, transparent 65%), #1b1e20;
  color: #eee;
  border-color: #888;
  box-shadow: 0 8px 24px #0007, inset 0 1px #ffffff30;
}
.roomView .promotion > p { border-left-color: #f80; }
.roomView .promotion .actions button {
  color: #eee;
  background: #252b30;
  border-color: #888;
}
.roomView .promotion .actions button:hover,
.roomView .promotion .actions button:focus-visible {
  color: #fff;
  background: #3b4650;
  border-color: #aab9c5;
}

.roomView footer, .roomView footer span { color: #ccc; }
.roomView footer a, .roomView footer a:hover { color: #b6d6ff; }

/* Revision 108 shared presentation BEGIN.
 * Deliberately identical in center/main.css and room/main.css.
 * Keep these copies in sync; do not add a shared stylesheet.
 * C4a-D3f surfaces; existing marquee tracks, geometry and animations are retained.
 */
:root {
  --theme-ink: #202f36;
  --theme-muted: #596a68;
  --theme-page: #fffaf0;
  --theme-card: #fffdf6;
  --theme-line: #a8b697;
  --theme-green: #176658;
  --theme-hover: #ff8800;
  --theme-soft: #f1f3df;
  --theme-shadow: 0 2px 7px #344b3020;
  --theme-radius: 5px 4px 5px 4px;
  --theme-heading: repeating-linear-gradient(45deg, #ffffff03 0 4px, transparent 4px 8px), #176658;
  --line: var(--theme-line);
  --muted: var(--theme-muted);
  --blue: var(--theme-ink);
  --green: var(--theme-green);
  --panel: var(--theme-card);
  --hud-edge: var(--theme-line);
  --hud-ink: var(--theme-ink);
  --hud-accent: var(--theme-green);
  --hud-surface: var(--theme-card);
  --hud-hover: var(--theme-soft);
}
body:is(.centerView, .roomView) {
  color: var(--theme-ink);
  background-color: #111;
  background-image: radial-gradient(#333 1px, transparent 1px);
}
body:is(.centerView, .roomView) :is(.centerCard, .roomCard) {
  background: radial-gradient(#c6bba52b 0.65px, transparent 0.8px) 0 0 / 8px 8px, var(--theme-page);
  border-color: var(--theme-line);
  box-shadow: 0 2px 12px #0002;
}
/* Remove decorative corner strokes, not content or interaction controls. */
body:is(.centerView, .roomView) :is(.centerCard, .roomCard, .centerRoomCard, .formationSlot, .formationChoice, :where(#queuePanel), :where(#matchModePick))::before,
body:is(.centerView, .roomView) :is(.centerCard, .roomCard, .centerRoomCard, .formationSlot, .formationChoice, :where(#queuePanel), :where(#matchModePick))::after {
  content: none;
}
body:is(.centerView, .roomView) :is(.centerRoomCard, :where(#formationOpen), .formationSlot, .formationChoice, :where(#queuePanel), .matchModeCard) {
  color: var(--theme-ink);
  background: var(--theme-card);
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow);
}
body:is(.centerView, .roomView) :is(.sectionTitle, .roomSection h2, :where(#formationTitle), .roomCredits h2, .roomHeader) {
  color: #fff;
  border-color: var(--theme-green);
  background: var(--theme-heading);
  border-radius: 3px;
}
body:is(.centerView, .roomView) :is(.sectionTitle, .roomSection h2) small {
  color: #e5efe5;
}
body:is(.centerView, .roomView) :is(.roomSidebar, .roomCredits) {
  color: var(--theme-muted);
  background: var(--theme-page);
  border-color: var(--theme-line);
}
body:is(.centerView, .roomView) :is(.accountGrid dt, .notice, .eyebrow) { color: var(--theme-muted); }
body:is(.centerView, .roomView) :is(.accountLinks a, .backLink, input, textarea, select) {
  color: var(--theme-ink);
  background: var(--theme-card);
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  box-shadow: 0 1px 3px #344b3014;
  text-shadow: none;
}
/* Limit button restyling to light surfaces; promotion and result overlays keep their palettes. */
body.centerView button:not(.formSquare):not(.square):not(.handPiece),
body.roomView :is(:where(#queuePanel), :where(#formationPick), :where(#matchModePick)) button,
body.roomView .roomHeader .backLink {
  color: var(--theme-ink);
  background: var(--theme-card);
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  box-shadow: 0 1px 3px #344b3014;
  text-shadow: none;
}
body:is(.centerView, .roomView) :is(.centerRoomCard > strong, .centerRoomCard .roomRules, .queueRules, .queueElapsed) {
  color: var(--theme-ink);
}
body:is(.centerView, .roomView) :is(.centerRoomCard, .formationChoice, .matchModeCard):not(:disabled):not(.roomClosed):hover {
  color: var(--theme-ink);
  background: var(--theme-soft);
  text-decoration: none;
}
/* Orange feedback belongs to individual controls/cards, never the whole page. */
@media (hover: hover) {
  body:is(.centerView, .roomView) :is(
    button:not(:disabled):not(.square):not(.formSquare):not(.handPiece),
    input:not(:disabled), textarea:not(:disabled), select:not(:disabled),
    .backLink, .accountLinks a, .recentKifuList a,
    .centerRoomCard:not([aria-disabled="true"]):not(.roomClosed),
    .formationSlot, .formationChoice:not(:disabled), .postComposer, .postedCard
  ):hover {
    border-color: var(--theme-hover) !important;
    outline: 2px solid var(--theme-hover);
    outline-offset: 0;
  }
}
body:is(.centerView, .roomView) :is(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--theme-hover);
  outline-offset: 2px;
}
/* Revision 108 shared presentation END. */

/* Waiting/mode selection only: retain present dimensions and layout. */
.roomView #queuePanel { color: var(--theme-ink); }
.roomView .queueClock circle { stroke: #9eaf88; }
.roomView .queueClock circle:nth-child(2) { stroke: #739c91; }
.roomView .queueClock circle:nth-child(3) { stroke: #276658; }
.roomView .queueDial { background: none; }
.roomView .queueRules > div { border-bottom-color: #a8b69730; }
.roomView #queueCancel { color: var(--theme-ink); background: var(--theme-card); border-color: var(--theme-line); }
.roomView #queueCancel:hover { color: var(--theme-ink); background: var(--theme-soft); }
.roomView #matchModePick {
  color: var(--theme-ink);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.roomView .matchModeCard { box-shadow: var(--theme-shadow); }
.roomView .roomSponsor { color: var(--theme-ink); background: #f5f0d8; }
.roomView .roomHeader .backLink:hover { color: var(--theme-ink); background: var(--theme-soft); }
/* Light information areas follow the page. Do not alter board/clock geometry or result bands. */
.roomView .gameMessage { color: var(--theme-ink); background: var(--theme-card); border-color: var(--theme-line); box-shadow: var(--theme-shadow); }
.roomView .playerBar { background: var(--theme-card); border-color: var(--theme-line); box-shadow: var(--theme-shadow); }
.roomView .playerBar.self { background: #f1f3df; }

/* Revision 109 shared presentation BEGIN. Keep these copies identical. */
:root{--theme-ink:#202e3a;--theme-muted:#596a68;--theme-page:#fffdf3;--theme-card:#fffdf5;--theme-line:#a6b7bd;--theme-green:#236f56;--theme-heading:linear-gradient(110deg,#297356,#19684f 65%,#236f56);--theme-radius:6px 4px 6px 4px;--theme-shadow:0 2px 3px #34493413;}
body:is(.centerView,.roomView){font-family:"Noto Sans CJK JP","Meiryo","Yu Gothic",sans-serif;color:var(--theme-ink);font-weight:500;}
body:is(.centerView,.roomView) :is(.centerCard,.roomCard){background-color:var(--theme-page);background-image:radial-gradient(#b3a57219 .7px,transparent .8px);background-size:7px 7px;}
body.centerView .centerRoomCard,body.roomView #queuePanel,body.roomView .matchModeCard{color:var(--theme-ink);background:var(--theme-card);border:2px solid var(--theme-line);border-radius:var(--theme-radius);box-shadow:var(--theme-shadow);}
body.centerView .sectionTitle,body.centerView .roomSection h2,body.roomView .roomHeader,body.roomView .roomSidebar .sectionTitle,body.roomView .roomCredits h2{background:var(--theme-heading);color:#fffdf3;border:1px solid #32795d;border-radius:5px 3px 5px 4px;box-shadow:0 1px 1px #30462b22,inset 0 1px #ffffff20;text-shadow:0 1px 1px #16433270;font-weight:800;}
body:is(.centerView,.roomView) .inkFrame{position:relative;border-color:transparent!important;outline:none!important;box-shadow:none!important;}
.inkFrame>.inkOutline,.inkFrame>summary>.inkOutline{position:absolute;left:-3px;top:-3px;width:calc(100% + 6px);height:calc(100% + 6px);overflow:visible;pointer-events:none;z-index:4;}
.inkOutline .inkHot,.inkOutline .inkHalo{opacity:0;transition:opacity 140ms ease;}
.inkOutline .inkHalo{filter:blur(1.6px);}
.inkInteractive:hover>.inkOutline .inkHot,.inkInteractive:focus-visible>.inkOutline .inkHot,.inkInteractive:hover>summary>.inkOutline .inkHot,.inkInteractive:has(>summary:focus-visible)>summary>.inkOutline .inkHot{opacity:1;}
.inkInteractive:hover>.inkOutline .inkHalo,.inkInteractive:focus-visible>.inkOutline .inkHalo,.inkInteractive:hover>summary>.inkOutline .inkHalo,.inkInteractive:has(>summary:focus-visible)>summary>.inkOutline .inkHalo{opacity:.28;}
.inkInteractive:hover>.inkOutline .inkNormal,.inkInteractive:focus-visible>.inkOutline .inkNormal,.inkInteractive:hover>summary>.inkOutline .inkNormal,.inkInteractive:has(>summary:focus-visible)>summary>.inkOutline .inkNormal{opacity:0;}
body:is(.centerView,.roomView) .cardNavMarker{position:absolute;right:7px;bottom:6px;width:17px;height:17px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#e6eddf;color:#21435b;font:700 15px/1 Arial,sans-serif;pointer-events:none;z-index:5;}
body:is(.centerView,.roomView) :is(a,button):hover>.cardNavMarker,body:is(.centerView,.roomView) :is(a,button):focus-visible>.cardNavMarker{background:#fce5c7;color:#924709;}
body:is(.centerView,.roomView).effectPaused .hero::before,body:is(.centerView,.roomView).effectPaused .hero::after{animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce){.inkOutline *{transition:none!important}}
body:is(.centerView,.roomView) .inkFrame::before,body:is(.centerView,.roomView) .inkFrame::after,body.centerView .centerCard::before,body.centerView .centerCard::after,body.roomView .roomCard::before,body.roomView .roomCard::after,body.roomView #matchModePick::before,body.roomView #matchModePick::after{content:none!important;}
/* Revision 109 shared presentation END. */

/* Revision 109 room-specific details. Match/playback geometry is unchanged. */
.roomView #queuePanel{padding:10px;}
.roomView .queueRules{font-weight:700;color:var(--theme-ink);}
.roomView .queueCancel{background:#fffdf5;color:#22313e;border-color:#a6b7bd;}
.roomView .queueCancel:hover{background:#fff8e9;}
.roomView .matchModePick{background:transparent;border-color:transparent;box-shadow:none;}
.roomView .roomCredits{background-color:#fffcf2;}
.roomView .roomCredits ul{padding-left:18px;}
.roomView .roomCredits a{color:#173957;text-decoration:underline;text-decoration-color:#17395760;text-underline-offset:3px;}
.roomView .roomCredits a:hover{color:#173957;text-decoration-color:#ef8a24;text-decoration-thickness:3px;}

/* Revision 111: approved game/replay decoration, with existing geometry retained. */
body.roomView .hand{background:#966b43;border-color:#725031;}
body.roomView .handPiece.emptyHand{visibility:hidden;}
body.roomView .gameInfo .playerBar,body.roomView .gameInfo .gameMessage{border-color:transparent;border-radius:6px 4px 6px 4px;background:#fffdf5;}
body.roomView .gameInfo .playerBar.self{background:#edf5ee;}
body.roomView .gameToolbar{border-bottom:0;box-shadow:none;}
body.roomView #resign{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 11px;min-width:0;font-size:15px;line-height:17px;background:linear-gradient(#795b43,#61462f);color:#fff;border:1px solid #503927;border-radius:5px;box-shadow:0 2px 0 #493524,inset 0 1px 0 #ffffff30;font-weight:800;}
body.roomView #resign small{display:block;color:#fff;font-size:9px;line-height:10px;font-weight:500;letter-spacing:.4px;}
body.roomView #resign:hover:not(:disabled){background:linear-gradient(#85644a,#6b4d34);color:#fff;border-color:#e68428;box-shadow:0 2px 0 #493524,0 0 4px #ed892d70;}
body.roomView #resign:active:not(:disabled){background:#61462f;box-shadow:0 1px 0 #493524,inset 0 1px 2px #0003;}
body.roomView #resign:disabled{opacity:.5;}
/* Width uses padding rather than a new fixed control size. */
body.roomView #resign{padding-left:40px;padding-right:40px;}
.gameBackdropHost{position:relative;isolation:isolate;}
.gameBackdropHost>.matchContent{position:relative;z-index:1;}
.gameBackdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict;background:#e9f2df;}
.gameBackdrop .motionShape{position:absolute;pointer-events:none;transform-origin:center;}
.gameBackdrop .motionCone{inset:-25%;background:conic-gradient(from 35deg at 42% 48%,#cbe9bb00,#97c77b90 60deg,#ffffd7b0 115deg,#85bbaa65 180deg,#d7f0b1a0 250deg,#cbe9bb00);}
.gameBackdrop .coveragePlane{position:absolute;background-size:180px 180px;opacity:.8;background-image:linear-gradient(135deg,#607b655e,#d6dfb15e 50%,#82987875);}
.gameBackdrop .coveragePlane.secondary{opacity:.7;background-image:repeating-linear-gradient(45deg,#7b946550 0 42px,#eff4cd50 42px 80px,#5b7c6240 80px 127.279px);}
.gameBackdrop .motionRipple{border-style:solid;border-radius:50%;background:none;opacity:0;}
.gameBackdrop .motionConcrete{border-radius:0;background:
 radial-gradient(ellipse at 15% 24%,var(--tone),transparent 58%),
 radial-gradient(ellipse at 72% 62%,var(--tone),transparent 62%),
 radial-gradient(ellipse at 46% 80%,#f4f5dc4a,transparent 45%),
 radial-gradient(circle,#496d492c .7px,transparent 1.5px) 0 0/7px 9px,
 radial-gradient(circle,#fbffec40 .9px,transparent 1.8px) 3px 5px/11px 13px;
 mask-image:radial-gradient(ellipse at center,#000 12%,#000b 40%,transparent 71%);
}
.gameBackdrop .motionStreak{left:0;top:0;transform-origin:center;border-radius:1px;background:var(--tone);}

.gameBackdrop .motionConcrete{background-color:#9ba98618;}

/* Accepted-move decoration: never intercept board input or change geometry. */
#board .square { position: relative; }
#board .moveAura, #board .moveReach {
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  z-index: 3; box-shadow: inset 0 0 0 3px #d87980;
}
/* Bright fill remains inside the square; the soft white aura extends outside. */
#board .moveAura::before, #board .moveReach::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 3px 1px #ffffffe0, 0 0 8px 2px #ffffff80;
  transform: scale(var(--auraScale)); opacity: var(--auraOpacity, 1);
}
#board .moveAura::after, #board .moveReach::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border-radius: 2px;
  background: radial-gradient(ellipse at 35% 25%,#fff8 0,transparent 65%),
    linear-gradient(145deg,#ffeae8aa,#ffa9b078 60%,#f77e9163);
  box-shadow: inset 0 1px 2px #fff9, inset 0 -2px 4px #d8798026; opacity: var(--auraOpacity, 1);
}

/* Keep account status and recovery actions easy to identify. */
body.roomView #authNotice, body.roomView #authNotice a { font-weight: 700; }

#beginnerMatchNotice { flex: 0 0 100%; text-align: center; margin: 4px 0; font-weight: 700; }

/* Match board selection/target colors across center and room formation UI. */
.formSquare.selected {background:#c2e4fa;box-shadow:inset 0 0 0 3px #609fc9;}
.formSquare.target {background:#e0f2fc;box-shadow:inset 0 0 0 2px #8cbedb;}

/* Revision130: local-player identity, kept out of the separate kifu page. */
.playerBar.self .selfBadge {display:inline-block;flex:0 0 auto;margin-left:5px;padding:1px 6px;border:1px solid #63a5be;border-radius:5px;background:#e1f5ff;color:#12516a;font-size:12px;font-weight:800;line-height:1.5;white-space:nowrap;}
/* Irregular shorter band ends; text is a separate unclipped layer. */
.roomView .resultBand::before,.roomView .resultBand::after {
 width:min(var(--result-band-max-width),112vw);
 margin-left:calc(min(var(--result-band-max-width),112vw) / -2);
 clip-path:polygon(7% 41%,100% -10%,88% 44%,0 60%);
}
.roomView .resultRate::before,.roomView .resultRate::after {clip-path:polygon(1% 61%,94% 44%,100% 67%,9% 70%);}
.roomView .resultTitleBand::before,.roomView .resultTitleBand::after {clip-path:polygon(10% 69%,100% 68%,85% 100%,0 90%);}
.roomView .resultBand > div,.roomView .resultDialog #resultTitle {
 text-shadow:1px 2px 1px #000,-1px -1px 1px #000,0 4px 3px #000e,0 7px 12px #000c;
}
.roomView .resultDialog #resultTitle {font-size:clamp(34px,5.5vw,70px);font-weight:900;letter-spacing:-1px;}
.roomView .resultBand p {font-size:clamp(17px,2.7vw,30px);font-weight:800;}
.roomView .resultRank img {width:76px;height:76px;filter:drop-shadow(0 4px 4px #0008);}
.resultRank.promoted #resultRankOldIcon {width:48px;height:48px;}
.resultRank.promoted #resultRankIcon {width:94px;height:94px;}
.resultRank.promoted .promotionHologram {font-size:2.7em;filter:drop-shadow(1px 3px 2px #000) drop-shadow(0 0 7px #d7ffff);}
@media(max-width:600px),(max-height:460px){
 .roomView .resultDialog #resultTitle {font-size:clamp(30px,7vw,44px);}
 .roomView .resultBand p {font-size:clamp(16px,3.5vw,21px);}
 .roomView .resultRank {flex-wrap:wrap;gap:5px;}
 .roomView .resultRank img {width:52px;height:52px;}
 .resultRank.promoted #resultRankOldIcon {width:32px;height:32px;}
 .resultRank.promoted #resultRankIcon {width:62px;height:62px;}
 .resultRank.promoted .promotionHologram {font-size:2.1em;margin-left:4px;}
}

/* Portrait clocks reserve room for integer seconds and their unit. */
.tallLayout.hasGame .handClock {font-size:16px;min-width:calc(4ch + 12px);}
.tallLayout.hasGame .handClock .clock {font-size:16px;}
.tallLayout.hasGame .hand {gap:1px;}

/* Same vertical band inset as center and kifu; board fitting reads actual geometry. */
body.roomView :is(.roomHeader,.sectionTitle,.roomCredits h2) {padding-top:3px;padding-bottom:3px;line-height:1.3;}
body.roomView :is(.sectionTitle,.roomCredits h2) {margin-top:5px;margin-bottom:4px;}