/* Online-player sidebar */
.wrap{
  max-width:1160px;
}
#clubLayout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
#clubMain,
#clubSidebar{
  min-width:0;
}
#clubSidebar{
  position:sticky;
  top:16px;
}
#clubSidebar .panel{
  margin:12px 0;
}
#clubSidebar h2{
  font-size:22px;
}
#clubOnlineList{
  max-height:65vh;
  overflow:auto;
  overflow-wrap:anywhere;
}
#clubOnlineList button{
  margin:6px 0 6px 8px !important;
}
@media(max-width:900px){
  .wrap{
    max-width:820px;
  }
  #clubLayout{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  #clubSidebar{
    position:static;
  }
  #clubOnlineList{
    max-height:240px;
  }
}

/* Compact sidebar leaderboard */
#clubLeaderboard h2{
  font-size:21px;
  margin-bottom:10px;
}
#clubLeaderboard th,
#clubLeaderboard td{
  padding:8px 4px !important;
  font-size:13px;
}
#clubLeaderboard th:nth-child(4){
  font-size:0;
}
#clubLeaderboard th:nth-child(4)::after{
  content:'Games';
  font-size:13px;
}
#clubLeaderboard td:nth-child(2){
  min-width:75px;
}
#clubLeaderboard td:nth-child(2) > span{
  width:30px !important;
  height:30px !important;
  margin-right:4px !important;
}
#clubLeaderboard button{
  width:100%;
  padding:9px;
}
@media(min-width:901px){
  #clubSidebar{
    max-height:calc(100dvh - 32px);
    overflow:auto;
    scrollbar-width:thin;
  }
  #clubOnlineList{
    max-height:280px;
  }
}

/* Coffeehouse background */
body{
  background:#745743;
  isolation:isolate;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(91,65,46,.60),rgba(65,44,32,.72)),
    url('/rose-library.png') center / cover no-repeat;
}
.panel{
  background:rgba(43,33,26,.78);
  border-color:#9b795b;
}
header{
  padding:12px;
  border-radius:12px;
  background:rgba(43,33,26,.78);
}
header h1,header p{
  text-shadow:0 2px 3px #24170f;
}
.footer{
  color:#fff0dd;
  text-shadow:0 1px 3px #24170f;
}

/* Coffee-cream foreground */
.panel, header {
  background: rgba(222, 197, 160, .50);
  color: #302319;
  border-color: #a0805e;
}
header h1, header p {
  color: #493321;
  text-shadow: none;
}
.panel .small, .panel .room, .panel .clock-note {
  color: #604933;
}
.panel a, .panel #toast {
  color: #70401c;
}

/* Thin, visible black square outlines */
#board .cm-chessboard .board .square {
  stroke: #000;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* Stronger text contrast on the transparent tan panels */
.panel {
  color: #170e08;
}
header h1 {
  color: #241307;
  text-shadow: 0 1px 1px rgba(255, 241, 214, .45);
}
header p,
.panel .small,
.panel .room,
.panel .clock-note {
  color: #302014;
}
.panel .small {
  font-weight: 500;
}
.panel h2,
.panel th {
  color: #241307;
}
.panel a,
.panel #toast {
  color: #542500;
  font-weight: 600;
}

#board .cm-chessboard .board .square {
  stroke: #000;
  stroke-width: 3px;
  stroke-opacity: 1;
  vector-effect: non-scaling-stroke;
}

/* Header home links */
header .club-home-title {
  color: inherit;
  text-decoration: none;
}
header .club-home-button {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  border: 1px solid #705339;
  border-radius: 8px;
  background: #dec5a0;
  color: #241307;
  font-weight: 700;
  text-decoration: none;
}
header .club-home-title:hover {
  text-decoration: underline;
}
header a:focus-visible {
  outline: 3px solid #241307;
  outline-offset: 4px;
}

/* Compact club panels and About page */
#clubSidebar .panel {
  padding: 10px 12px;
  margin: 8px 0;
  border-radius: 10px;
}
#clubSidebar h2 {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 8px;
}
#clubSidebar p {
  margin: 8px 0;
}
#clubSidebar button {
  padding: 8px 10px;
}
#clubLeaderboard th,
#clubLeaderboard td {
  padding: 6px 4px !important;
}
#clubAboutNav a {
  display: block;
  padding: 4px 0;
  font-weight: 700;
}
#clubAboutNav a:focus-visible {
  outline: 3px solid #241307;
  outline-offset: 3px;
}
.about-wrap {
  max-width: 820px;
  margin: auto;
  padding: 18px;
}
.about-content {
  line-height: 1.7;
}
.about-content h2 {
  margin-bottom: 8px;
}
@media(min-width:901px) {
  #clubOnlineList {
    max-height: 180px;
  }
}

/* Larger, darker club text */
body {
  font-size: 18px;
}
.panel {
  color: #120b06;
}
header h1, header p,
.panel h2, .panel th,
.panel .small, .panel .room,
.panel .clock-note {
  color: #211208;
}
.panel .small {
  font-size: 15px;
  line-height: 1.55;
}
#clubSidebar h2 {
  font-size: 22px;
}
#clubLeaderboard th,
#clubLeaderboard td {
  font-size: 15px;
}
#clubLeaderboard th:nth-child(4)::after {
  font-size: 15px;
}
.panel a, .panel #toast {
  color: #3b1905;
}
.about-content {
  font-size: 19px;
}