/* 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: #fffef9;
  --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:#fffef9;--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. */
/* Revision 178: compact waiting card, distinct from the cream page. */
body.roomView #queuePanel {
  margin: 6px auto 9px;
  padding: 5px 10px;
  background: #edf3e8;
}
.roomView #queuePanel .eyebrow {
  margin-bottom: 2px;
  line-height: 1.4;
}
.roomView #queuePanel h2 {
  margin-bottom: 2px;
  line-height: 1.35;
}
.roomView #queuePanel .queueDial {
  width: 100px;
  margin: 3px auto;
}
.roomView #queuePanel .queueRules { line-height: 16px; }
.roomView #queuePanel .queueRules > div { padding: 1px 0; }
.roomView #queuePanel #queueMessage,
.roomView #queuePanel #endMessage,
.roomView #queuePanel #queueReturn p {
  margin: 3px 0 0;
  line-height: 1.4;
}
.roomView #queuePanel .actions { margin-top: 8px; }
.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:#fffef9;}
.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; opacity: var(--auraOpacity, 1);
  box-shadow: inset 0 0 0 3px #ca9398;
}
/* Only the moved square has an outward black aura. */
#board .moveAura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 3px 1px #0009, 0 0 8px 2px #0005;
  transform: scale(var(--auraScale));
}
#board .moveAura::after, #board .moveReach::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border-radius: 2px;
}
#board .moveAura::after {
  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 #ca939826;
}
#board .moveReach {
  box-shadow: inset 0 0 0 3px #9a7e70;
}
#board .moveReach::after {
  background: conic-gradient(from 35deg at 50% 50%,#2517101c,#25171052 120deg,#25171029 240deg,#2517101c);
}

/* 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;}

/* 棋譜共有：初期表示の上部。盤面側は実測した高さで収め直す。 */
.kifuShare[hidden], .kifuShare input[hidden] { display: none !important; }
.kifuShare { margin: 8px 0; text-align: center; }
.kifuShareButtons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kifuShareButtons button, .kifuShareButtons a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; border: 2px solid #6a7865; border-radius: 8px;
  background: #f8faf2; color: #223944; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.kifuShareButtons button:hover, .kifuShareButtons a:hover,
.kifuShareButtons button:focus-visible, .kifuShareButtons a:focus-visible {
  border-color: #df872c; box-shadow: 0 0 0 2px #df872c33; text-decoration: none;
}
.kifuShare [data-share-status] { margin: 4px 0; font-size: 14px; }
.kifuShare [data-share-status]:empty { display: none; }
.kifuShare input { width: min(100%, 560px); box-sizing: border-box; font-size: 16px; }

/* 棋譜操作・CSA保存・共有を同じ行へ。狭い場合は共有を次の行へ送る。 */
.replaySpace:has(.kifuShare) {
  height: auto; min-height: var(--replayHeight); flex-wrap: wrap;
  gap: 4px 6px; padding: 2px 0; box-sizing: border-box;
}
.replaySpace .kifuShare { display: contents; }
.replaySpace .kifuShareButtons { flex-wrap: nowrap; gap: 5px; }
.replaySpace .kifuShareButtons :is(button,a) {
  padding: 4px 6px; font-size: 14px; white-space: nowrap;
  border-width: 1px; border-radius: 4px;
}
.replaySpace .kifuShare [data-share-status] { flex-basis: 100%; margin: 0; text-align: center; }
.replaySpace .kifuShare input { flex-basis: 100%; }

/* いきもの占い：既存の盤面・結果演出と独立した、静止したカード表示。 */
.creatureSection{margin:12px 0;padding:14px 16px;background:#fffdf5;color:#283b36;scroll-margin-top:12px}
.creatureCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;color:#283b36}
.creatureCard{min-width:0;padding:18px 20px 22px;text-align:center;background:radial-gradient(ellipse at 50% 32%,#fff 0%,#f3f7e9 52%,#f9f4e7 100%);border:2px solid #7b8874;border-radius:24px 20px 26px 18px / 20px 24px 19px 25px;box-shadow:0 4px 0 #d8ddca,0 8px 18px #283b3610;overflow-wrap:anywhere}
.creatureCard:empty{background:none;border-color:transparent;box-shadow:none;min-height:24px}
.creatureCard:nth-child(2){background:radial-gradient(ellipse at 50% 32%,#fff 0%,#f6eee7 52%,#f9f4e7 100%)}
.creatureCard:nth-child(2):empty{background:none}
.creatureCard .creaturePlayer{text-shadow:none;letter-spacing:0;margin:0 0 8px;padding:0 0 8px;border:0;border-bottom:1px solid #76887838;background:none;box-shadow:none;color:#344a42;font-size:17px;line-height:1.5}
.creatureEmoji{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-size:88px;line-height:1.35;filter:saturate(1.08) drop-shadow(0 5px 3px #4e624926);margin:4px auto 12px}
.creatureCard .creatureKana{margin:0;color:#657568;font-size:12px;font-weight:700;letter-spacing:1px}
.creatureCard .creatureName{margin:3px 0;padding:0;background:none;border:0;box-shadow:none;color:#293f35;font-size:28px;line-height:1.3}
.creatureCard .creatureEnglish{margin:4px 0 14px;color:#73786e;font-size:13px}
.creatureCard .creatureMessage{margin:0;text-align:left;font-size:16px;line-height:1.85;font-weight:500;color:#34463d}
.creatureDialog{box-sizing:border-box;width:760px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:20px;background:#fffdf5;border:2px solid #737f6b;border-radius:22px;color:#283b36;overflow:auto;box-shadow:0 18px 60px #18251d55}
.creatureDialog::backdrop{background:#18251d99}
.creatureHeading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.creatureHeading h2{margin:0;padding:0;background:none;border:0;box-shadow:none;font-size:24px;color:#283b36}
.creatureHeading button{flex-shrink:0}
#replayControls .fortuneAnchor{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border:1px solid #788778;border-radius:8px;background:#fffdf5;color:#263e47;text-decoration:none;font-weight:700;font-size:14px}
#replayControls .fortuneAnchor:hover{border-color:#e38b28;box-shadow:0 0 0 2px #e38b2840}
@media(max-width:600px){.creatureCards{grid-template-columns:minmax(0,1fr);gap:14px}.creatureDialog{padding:14px}.creatureCard{padding:14px 16px 18px}.creatureEmoji{font-size:76px}.creatureSection{padding:12px}.creatureHeading h2{font-size:22px}}

/* 縦配置の盤面は、駒台との間に空白の段を設けない。左右の枠は維持。 */
.tallLayout.hasGame .boardLayout {row-gap:0;}
.tallLayout.hasGame .boardFrame {padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;}
.tallLayout.hasGame .matchContent {padding-top:0;}
.tallLayout.hasGame .gameToolbar {margin-bottom:0;padding-bottom:0;}
.tallLayout.hasGame .roomHeader {margin-bottom:0;}
@media(max-width:600px){body.roomView .roomPage {margin-top:0;padding-top:0;}}

/* 見出しは改行せず、内容の幅に合わせJSで文字サイズを調整する。 */
:is(h1,h2,h3,h4,h5,h6),.roomHeading {white-space:nowrap;overflow-wrap:normal;word-break:normal;min-width:0;}
:is(h1,h2,h3,h4,h5,h6) *,.roomHeading .centerConnections {white-space:nowrap;}

/* Revision157: four result actions stay in one row on narrow screens. */
.roomView .resultDialog .actions {
  display: flex; flex-wrap: nowrap; gap: 4px;
  width: min(720px, calc(100% - 16px)); max-width: calc(100% - 16px);
  padding: 6px; margin: 12px auto 0;
}
.roomView .resultDialog .actions > :is(a, button) {
  flex: 1 1 0; min-width: 0; width: auto; max-width: none;
  white-space: nowrap; box-sizing: border-box; padding: 8px 3px;
  text-align: center;
}

/* 小数部分は整数部分より控えめに表示。 */
#ratingChange .resultRateFraction { font-size: 0.75em; }

/* Desktop rated/free games: resign belongs at the lower right of the board area. */
body.roomView:not(.casualPlay):not(.tallLayout) #gamePanel{position:relative}
/* PCの情報欄は62px・560px・62pxの3列と8pxの隙間3個の右側。ボタンをその幅の中央へ。 */
body.roomView:not(.casualPlay):not(.tallLayout) #gamePanel>.gameToolbar{position:absolute;left:calc(62px + 560px + 62px + 8px * 3);right:0;bottom:8px;justify-content:center;margin:0;padding:0;z-index:2}
body.roomView:not(.casualPlay):not(.tallLayout) #gamePanel .gameInfo{padding-bottom:64px}

/* Revision177 trial: presentation-only movement; the committed board stays interactive. */
.movePiece {
  position: absolute; margin: 0; pointer-events: none; transform-origin: 0 0;
}
.movePiece img {
  display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
}
.movePiece.flip img { transform: rotate(180deg); }
#board .pieceVisual.moveHidden { visibility: hidden; }

body.roomView #authNotice { margin:8px 0 0; padding:7px 10px; line-height:1.45; }

/* Player cards: side colors are independent of the viewer's position. */
body.roomView.hasGame .gameInfo {
  display:flex; flex-direction:column; gap:10px; min-width:0;
}
body.roomView.hasGame .gameInfo .playerBar {
  --player-paper:#f7f7f7; --player-ink:#191f1f; --player-edge:#191f1f;
  --player-shape:polygon(0 6%,100% 0,100% 94%,6% 100%,0 66%);
  position:relative; isolation:isolate; box-sizing:border-box; flex:none;
  margin:0; padding:20px 20px 18px; border:0; border-radius:0;
  background:transparent; box-shadow:none; color:var(--player-ink);
}
body.roomView.hasGame .gameInfo .playerBar[data-side="0"] {
  --player-paper:#191f1f; --player-ink:#f7f7f7; --player-edge:#f7f7f7;
}
body.roomView.hasGame .gameInfo .playerBar::before,
body.roomView.hasGame .gameInfo .playerBar::after {
  content:"" !important; position:absolute; z-index:-1; pointer-events:none;
  clip-path:var(--player-shape); border:0; border-radius:0; box-shadow:none;
}
body.roomView.hasGame .gameInfo .playerBar::before {inset:0;background:var(--player-edge);}
body.roomView.hasGame .gameInfo .playerBar::after {inset:3px;background:var(--player-paper);}
body.roomView.hasGame .gameInfo .playerBar.opponent {order:0;}
body.roomView.hasGame .gameInfo .versusMark {order:1;}
body.roomView.hasGame .gameInfo .playerBar.self {order:2;}
body.roomView.hasGame .gameInfo .gameMessage {order:3;}
body.roomView.hasGame .gameInfo .gameToolbar {order:4;}
body.roomView.hasGame .gameInfo .playerIdentity {
  margin:0 0 8px; min-width:0; font-size:24px; line-height:1.3; font-weight:800;
}
body.roomView.hasGame .gameInfo .playerDetails {display:flex;align-items:center;gap:12px;min-width:0;}
body.roomView.hasGame .gameInfo .playerMetadata {flex:1;min-width:0;}
body.roomView.hasGame .gameInfo .playerDetails .playerCharacter {width:64px;height:72px;object-fit:contain;}
body.roomView.hasGame .gameInfo .playerBar :is(.playerId,.playerRate,.playerRank,.timeLine,.clock) {
  color:inherit; text-shadow:none;
}
body.roomView.hasGame .gameInfo .playerBar :is(.playerId,.playerRate,.playerRank) {
  margin:0; font-size:16px; line-height:1.5;
}
body.roomView.hasGame .gameInfo .playerBar .timeLine {
  margin:8px 0 0; padding:6px 0 0; border-top:2px solid #7ca795;
  justify-content:flex-end; gap:6px; font-weight:700; white-space:nowrap;
}
body.roomView.hasGame .gameInfo .playerBar .timeLine .clock {font-size:38px;line-height:1.15;}
body.roomView.hasGame .gameInfo .playerBar .clock.lowTime {color:#e44e46;}
body.roomView.hasGame .gameInfo .versusMark {
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:0;line-height:1;font-size:27px;font-style:italic;font-weight:900;
  color:#191f1f;text-shadow:1px 1px #f7f7f7,-1px -1px #f7f7f7;
}
body.roomView.hasGame .gameInfo .versusMark::before,
body.roomView.hasGame .gameInfo .versusMark::after {
  content:"";width:42px;height:3px;background:#245a43;border-radius:50%;
}
body.roomView.hasGame .gameInfo .gameMessage {margin-top:3px;}
body.roomView.tallLayout.hasGame .gameInfo .playerBar {padding:17px 18px;}
body.roomView.tallLayout.hasGame .gameInfo .playerIdentity {margin-bottom:5px;}
body.roomView.tallLayout.hasGame .gameInfo .playerBar .timeLine .clock {font-size:32px;}
/* Keep the existing mobile portrait in the hand rail. */
body.roomView.tallLayout.hasGame .gameInfo .playerDetails .playerCharacter {display:none;}

/* These panels own their polygon border instead of the generic ink rectangle. */
body.roomView.hasGame .gameInfo .playerBar > .inkOutline {display:none;}

/* Emphasize the active player turn in both play screens. */
body.roomView.hasGame .gameInfo .gameMessage .myTurnMessage {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.playerMetadata .playerTeam{font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere;margin-bottom:3px;}

/* Static HTML marquees: CSS starts motion without JavaScript. */
.cssMarquees{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;--marquee-page-width:min(1200px,100vw);--marquee-left-edge:calc((100vw - var(--marquee-page-width))/2);--marquee-right-edge:var(--marquee-left-edge);--marquee-play-state:running}
.centerView .cssMarquees{--marquee-page-width:min(100vw,calc(50vw + 392px))}
.roomView:not(.casualMenu):not(.casualPlay) .cssMarquees{--marquee-page-width:min(100vw,calc(50vw + 392px))}
.roomView.tallLayout.hasGame .cssMarquees{--marquee-page-width:100vw}
.kifuListView .cssMarquees{--marquee-page-width:min(1160px,100vw)}
.cssMarquees .centerMarqueeTrack{width:var(--marquee-font);--marquee-offset:8px;--marquee-font:19.2px;--marquee-speed:18;--marquee-duration:240s;--marquee-color:rgba(50,255,50,.30)}
.cssMarquees [data-layer="1"]{--marquee-offset:35px;--marquee-font:25.6px;--marquee-speed:12;--marquee-duration:480s;--marquee-color:rgba(50,255,50,.25)}
.cssMarquees [data-layer="2"]{--marquee-offset:69px;--marquee-font:35.2px;--marquee-speed:6;--marquee-duration:600s;--marquee-color:rgba(150,150,150,.20)}
.cssMarquees [data-side="left"]{right:calc(100% - var(--marquee-left-edge) + var(--marquee-offset));transform:rotate(180deg)}
.cssMarquees [data-side="right"]{left:calc(100% - var(--marquee-right-edge) + var(--marquee-offset))}
.cssMarquees .centerMarqueeContent{display:flex;flex-direction:column;align-items:flex-start;writing-mode:horizontal-tb;font-size:var(--marquee-font);color:var(--marquee-color);animation:marqueeScroll var(--marquee-duration) linear infinite;animation-play-state:var(--marquee-play-state)}
.cssMarquees .centerMarqueeContent>span{writing-mode:vertical-rl;text-orientation:sideways;flex:none;white-space:nowrap;line-height:1}
.cssMarquees [data-side="left"] .centerMarqueeContent,.cssMarquees [data-side="right"][data-layer="1"] .centerMarqueeContent{animation-direction:reverse}
.cssMarquees [data-side="left"][data-layer="1"] .centerMarqueeContent{animation-direction:normal}
.cssMarquees [hidden]{display:none!important}
@keyframes marqueeScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(max-width:800px),(prefers-reduced-motion:reduce){.cssMarquees{display:none!important}.cssMarquees .centerMarqueeContent{animation:none!important}}