@font-face {
  font-family: "Recursive Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('RecursiveMonoCslSt-Regular.0020-00FF.woff2') format('woff2');
}
@font-face {
  font-family: "Recursive Mono"; font-style: italic; font-weight: 400; font-display: swap;
  src: url('RecursiveMonoCslSt-Italic.0020-00FF.woff2') format('woff2');
}
@font-face {
  font-family: "Recursive Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url('RecursiveMonoCslSt-Bold.0020-00FF.woff2') format('woff2');
}

html, body { font-family: "Recursive Mono"; margin: 0; height: 100%; }
#container { height: 100%; }
#container[tabindex="-1"]:focus { outline: none; }
#menu { --circle-size: 30px; position: fixed; left: 0; top: 0; z-index: 9; display: flex; pointer-events: none; }
#menu .item { position: relative; flex: none; padding: 1px 0 0 1px; pointer-events: auto; }
#menu.playing-menu { --circle-size: clamp(16px, calc((100vw - 4px) / var(--menu-count) - 7px), 30px); }
#menu .icon { display: block; position: relative; box-sizing: content-box; cursor: pointer; background: #222; color: #fff;
  border: 3px solid #FFF; border-radius: 50%; line-height: var(--circle-size); width: var(--circle-size); height: var(--circle-size); text-align: center; padding: 0; }
#menu .icon:focus-visible { outline: 2px solid #06C; outline-offset: -2px; }
#menu .icon .tooltip { display: none; position: absolute; top: calc(100% + 6px); left: 0;
  white-space: nowrap; background: #222; color: #FFF; padding: 4px 8px; border-radius: 8px; font-size: 12px; line-height: 1.5; }
#menu .ping { font-size: 8px; }
#menu .timer-icon { font-size: clamp(7px, calc(var(--circle-size) * 0.35), 11px); font-weight: 700; }
#menu .end-icon { border-color: #F80; }
#menu .player-icon { border-color: #222; }
#menu .own-player { box-shadow: inset 0 0 0 2px #08F; }
#menu .icon.green { border-color: #9F0; }
#menu .icon.yellow { border-color: #FC0; }
#menu .icon.orange { border-color: #F80; }
#menu .icon.red, #menu .icon.has-error { border-color: #F00; }
.menu-panel { display: none; position: fixed; top: calc(var(--circle-size) + 10px); left: 4px;
  width: min(360px, calc(100vw - 40px)); max-height: calc(100dvh - var(--circle-size) - 34px); overflow: auto;
  padding: 12px; border: 2px solid #222; border-radius: 12px; background: #FFF; color: #222;
  box-shadow: 0 3px 16px #0004; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.menu-popover.expanded .menu-panel { display: block; }
@media (hover: hover) {
  .menu-popover:hover .menu-panel, #menu .icon:hover .tooltip { display: block; }
}
@media (orientation: landscape) {
  #menu { flex-direction: column; }
  #menu.playing-menu { --circle-size: clamp(16px, calc((100dvh - 4px) / var(--menu-count) - 7px), 30px); }
  #menu .icon .tooltip { top: 0; left: calc(100% + 6px); }
  .menu-panel { top: 4px; left: calc(var(--circle-size) + 10px); max-height: calc(100dvh - 32px); width: min(360px, calc(100vw - var(--circle-size) - 40px)); }
}

button, input, select {
  font: inherit; border: 2px solid #222; border-radius: 12px; background: #FFF;
  padding: 10px 14px;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
button { cursor: pointer; }
button:hover { background: #EEE; }
input { max-width: 100%; box-sizing: border-box; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* The board always occupies the largest square in the viewport. UI overlays
   never participate in its sizing, even on square screens. */
#play-page { --board-size: 100vmin; position: fixed; inset: 0; }
@supports (height: 100dvh) {
  #play-page { --board-size: min(100vw, 100dvh); }
}
#board-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#board { flex: none; width: var(--board-size); height: var(--board-size); background: #CB5; }
#board svg { display: block; width: 100%; height: 100%; }
.ghost-stone { opacity: 0.4; pointer-events: none; }
.premove-stone { opacity: 0.65; pointer-events: none; }
/* SVG scales the browser's default focus outline into a huge ring. */
.board-point { fill: transparent; outline: none; }
.board-point.playable { cursor: pointer; touch-action: manipulation; }
.board-point:focus-visible { stroke: #06C; stroke-width: 0.06; }
.play-status h2 { margin: 8px 0; }
.live-players { list-style: none; padding: 0; display: grid; gap: 8px; }
.live-players li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.live-players li > span:last-child { margin-left: auto; }
.player-color { display: inline-block; width: 16px; height: 16px; border: 1px solid #222; border-radius: 50%; }

/* Mirror only your timer along the two board edges, without taking space or clicks. */
#countdown-bars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.countdown-bar { position: absolute; left: calc((100% - var(--board-size)) / 2);
  width: var(--board-size); height: 5px; background: #DDD; }
.countdown-first { top: max(0px, calc((100% - var(--board-size)) / 2 - 5px)); }
.countdown-last { bottom: max(0px, calc((100% - var(--board-size)) / 2 - 5px)); }
.countdown-fill { position: absolute; left: 0; bottom: 0; width: var(--remaining); height: 100%;
  background: #000; transition: width 250ms linear, height 250ms linear; }
@media (orientation: landscape) {
  .countdown-bar { top: calc((100% - var(--board-size)) / 2); bottom: auto; left: auto;
    width: 5px; height: var(--board-size); }
  .countdown-first { left: max(0px, calc((100% - var(--board-size)) / 2 - 5px)); }
  .countdown-last { right: max(0px, calc((100% - var(--board-size)) / 2 - 5px)); }
  .countdown-fill { width: 100%; height: var(--remaining); }
}

#page-container { margin: 60px auto 0 auto; padding: 0 10px 10px 10px; max-width: 600px; }
@media screen and (min-aspect-ratio: 1/1) {
  #page-container { margin: 0 auto 0 auto; }
}

#page-container.lobby-page { max-width: 720px; margin-top: 0; padding: 72px 16px 32px; }
.error { color: #A20; }
.lobby-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lobby-header h1 { margin: 0; }
.lobby-section { margin-top: 24px; }
.lobby-section h2 { margin: 0 0 10px 0; }
.games-list { display: grid; gap: 10px; }
.game-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; width: 100%;
  text-align: left;
}
.game-id { font-weight: 700; }
.game-date { display: block; margin-top: 4px; font-size: 0.85em; font-weight: normal; color: #555; }
.games-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 16px; }
.game-phase, .game-count { color: #555; }
.game-settings { display: block; margin-top: 4px; font-weight: normal; color: #555; }
.create-game, .create-game-savings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.create-game { margin: 24px 0; }
.create-game h2 { margin: 0; }
.create-game-field { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 16px; align-items: start; }
.create-game-field > label { padding-top: 12px; line-height: 1.4; }
.create-game-control { min-width: 0; }
.create-game select, .create-game input { display: block; min-width: 0; width: 100%; box-sizing: border-box; line-height: 1.4; }
.create-game-help { margin: 8px 0 0; font-size: 0.875em; line-height: 1.5; color: #555; }
.login-form, .game-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.login-form label { flex-basis: 100%; }
.room-color { display: flex; align-items: center; gap: 8px; }
.color-picker { max-width: 100%; }
.color-palette { display: flex; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 8px;
  background-color: #CB5;
  background-image: linear-gradient(#0004 1px, transparent 1px), linear-gradient(90deg, #0004 1px, transparent 1px);
  background-size: 32px 32px; background-position: 21px 21px; }
.color-choice { flex: none; box-sizing: border-box; width: 26px; height: 26px; padding: 0;
  border: 1px solid #222; border-radius: 50%; transition: none; }
.color-choice[aria-pressed="true"] { box-shadow: 0 0 0 2px #CB5, 0 0 0 4px #222; }
.color-choice:focus-visible { outline: 2px solid #06C; outline-offset: 2px; }
.color-choice:disabled { opacity: 0.3; }
.login-form .color-picker { flex-basis: 100%; }
.player-color { flex: none; }
.game-actions { margin-top: 16px; }
.danger { color: #A20; }
.players-list { list-style: none; padding: 0; }
.player-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; border-bottom: 1px solid #DDD; }
.player-name { font-weight: 700; }
.player-cooldown { display: block; margin-top: 4px; color: #555; }
.player-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.player-controls input { width: 7em; }
.kick-player { color: #A20; }
.kick-player:disabled { color: #777; }
@media screen and (max-width: 600px) {
  .game-row, .create-game-field { grid-template-columns: minmax(0, 1fr); }
  .create-game-field { row-gap: 6px; }
  .create-game-field > label { padding-top: 0; }
}

/* Replay uses the same fullscreen square. Like the menu, its controls overlay
   the viewport, on the opposite edge, without shrinking the board. */
.replay-controls { --control-size: clamp(24px, calc((100vmin - 64px) / 5), 36px);
  position: fixed; z-index: 8; left: 4px; right: 4px; bottom: 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  pointer-events: none; }
.replay-controls input { flex: 1; min-width: 24px; max-width: 360px; height: var(--control-size);
  padding: 0; margin: 0; border: 0; accent-color: #222; pointer-events: auto; }
.replay-buttons { display: flex; gap: 2px; flex: none; }
.replay-buttons button { width: var(--control-size); height: var(--control-size); padding: 0;
  border: 2px solid #FFF; border-radius: 50%; background: #222; color: #FFF;
  font-size: 14px; line-height: 1; pointer-events: auto; }
.replay-buttons button:disabled { opacity: 0.5; background: #555; }
.replay-buttons button:focus-visible { outline: 2px solid #06C; }
@media (orientation: landscape) {
  .replay-controls { left: auto; top: 4px; flex-direction: column; width: var(--control-size); }
  .replay-controls input { writing-mode: vertical-lr; direction: ltr;
    width: var(--control-size); height: auto; min-height: 24px; max-height: 360px; }
  .replay-buttons { flex-direction: column; }
}
.lobby-import { max-width: 600px; margin: 24px auto; padding: 0 10px; }
.lobby-section > summary { cursor: pointer; }
#sgf-source { display: block; width: 100%; box-sizing: border-box; margin: 12px 0;
  font: inherit; resize: vertical; padding: 8px; }