:root {
  --ink: #202d48;
  --blue: #293f65;
  --paper: #f2f4f6;
  --surface: #fcfdff;
  --line: #ced6df;
  --display: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font: 15px/1.5 "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box }
body { max-width: 1140px; margin: auto; padding: 0 clamp(16px,4vw,56px) }
header { min-height: 70px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line) }
.brand { display: inline-flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; font: 700 26px var(--display) }
.brand img { width: 34px }
h1 { font-size: 16px; font-weight: 550; margin: 0; padding-left: 18px; border-left: 1px solid var(--line) }
h2 { margin: 0; font: 700 32px/1.2 var(--display) }
button,.button,select,input { font: inherit; color: inherit; border: 1px solid #aebccc; border-radius: 7px; padding: 8px 12px; background: var(--surface); min-height: 42px }
button,.button,select { cursor: pointer }
.button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center }
.solid,.join button { background: var(--blue); color: white; border-color: var(--blue) }
button:disabled { cursor: default; opacity: .5 }
:focus-visible { outline: 3px solid #be7627; outline-offset: 3px }
.actions,.online,.join { display: flex; gap: 8px; flex-wrap: wrap }
.online {
  gap: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  color: #fff;
  background: #354c70;
  border: 1px solid #93a6bf;
  border-radius: 8px;
}
.online select,.online button {
  color: inherit;
  background: transparent;
  border: 0;
  min-height: 42px;
  white-space: nowrap;
}
.board-size { position: relative; display: flex; align-items: stretch }
.board-size::after {
  content: "";
  position: absolute;
  right: 12px;
  top: calc(50% - 4px);
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.online select { appearance: none; padding: 8px 28px 8px 12px; border-radius: 7px 0 0 7px }
.online option { color: var(--ink); background: var(--surface) }
.online button { position: relative; border-radius: 0 7px 7px 0; padding-inline: 14px; font-weight: 600 }
.online button::before { content: ""; position: absolute; left: 0; inset-block: 11px; border-left: 1px solid #91a4bd }
.online :focus-visible { outline: 2px solid #e3edf9; outline-offset: -4px }
.lobby { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding: 24px 0 40px }
.lobby article { min-width: 0; overflow: hidden; border-radius: 12px; background: var(--surface); border: 1px solid var(--line) }
.details { padding: 22px }
.details p { color: #53647a; margin: 7px 0 20px; font-size: 14px }
.details .actions { font-size: 14px }
.art { height: 124px; position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center }
.feature { grid-column: 1/-1; display: grid; grid-template-columns: 48% 52%; align-items: stretch }
.lobby .feature { color: white; background: var(--blue); border-color: var(--blue) }
.feature .details { grid-area: 1/1; z-index: 1; padding: clamp(24px,4vw,52px); align-self: center }
.feature h2 { font-size: clamp(50px,6vw,78px); letter-spacing: .04em }
.feature p { color: #dbe5ef }
.feature .solid { background: #fff; color: var(--ink); border-color: #fff }
.feature .actions { gap: 10px }
.feature .art { grid-area: 1/2; height: auto; min-height: 252px }
.grid { position: absolute; width: 92%; aspect-ratio: 1; transform: rotate(-15deg); background-image: linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px); background-size: 12.5% 12.5%; border: 1px solid var(--grid) }
.feature .grid { --grid: #7588a4; width: 106%; background-color: #354e75; border: 9px solid #51698a; box-shadow: 0 12px 0 #182e50,0 22px 34px #17274180; border-radius: 3px }
.grid i { position: absolute; width: 11.7%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse at 34% 22%,#596776,#202b39 65%,#101826); box-shadow: 2px 5px 5px #101b3066; transform: translate(-50%,-50%) }
.grid .white { background: radial-gradient(ellipse at 30% 20%,white,#f2f0e8 65%,#c6c8c7) }
.xq-art { background-color: #e8c8a1; background-image: linear-gradient(#a279535e 1px,transparent 1px),linear-gradient(90deg,#a279535e 1px,transparent 1px); background-size: 42px 42px }
.xq-art span,.xq-art::before { display: grid; place-items: center; width: 80px; aspect-ratio: 1; border: 5px double #ad8258; border-radius: 50%; background: #f5dbaf; box-shadow: 2px 5px 0 #b68d62,3px 8px 8px #77573855; color: #973e31; font: 700 52px var(--display); transform: rotate(-10deg) }
.xq-art::before { content: '車'; position: absolute; left: 4%; top: 72%; color: #4a433e }
.chess-art { background: repeating-conic-gradient(#869cb6 0 25%,#dfe7ec 0 50%) center/72px 72px; color: #202d48; font: 106px/1 Georgia,serif; text-shadow: 1px 2px #eaf1f5,3px 5px 3px #40526970 }
.gomoku-cover { background: #b9caba; --grid: #758a79 }
.gomoku-art { width: 83%; transform: rotate(12deg) }
.room-entry { grid-column: 1/-1; display: flex; gap: 14px 24px; flex-wrap: wrap; align-items: center; padding: 22px 0 0; border-top: 1px solid var(--line) }
.room-entry h2 { font-size: 22px }
.join { flex: 1; flex-wrap: nowrap; max-width: 520px }
.join input { flex: 1; min-width: 0 }
#recent,#message { color: var(--blue); font-size: 14px; margin: 0 }
#message:empty { display: none }
.back { margin-left: auto; color: var(--blue); text-underline-offset: 4px }
@media(max-width: 790px) {
  .lobby { gap: 12px }
  .details { padding: 16px }
}
@media(max-width: 660px) {
  header { min-height: 56px }
  .lobby { grid-template-columns: 1fr; padding-top: 14px }
  .lobby article { display: grid; grid-template-columns: 24% 1fr }
  .lobby .feature { grid-template-columns: minmax(0,1fr) 22% }
  .feature .art { min-height: 190px }
  .feature .grid { width: 290px; left: -28px }
  .feature .details { padding: 20px }
  .art { height: 100% }
  .details h2 { font-size: 26px }
  .feature h2 { font-size: 48px }
  .details p { margin: 4px 0 12px }
  .xq-art span { width: 64px; font-size: 40px }
  .chess-art { font-size: 72px }
  .gomoku-art { width: 170% }
  .room-entry { display: grid; gap: 10px }
}

#code { scroll-margin: 18px }
@media (hover: hover) {
  .details > .actions > button:not(:disabled):hover,.table aside button:not(:disabled):hover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue) }
  .details .solid:hover,.join button:hover { background: #1c3054; color: white }
  .online select:hover,.online button:not(:disabled):hover { background: #476084 }
  .back:hover { text-decoration-thickness: 2px }
}