* { box-sizing: border-box; }
:root { --go-safe-top: env(safe-area-inset-top, 0px); --go-safe-right: env(safe-area-inset-right, 0px); --go-safe-bottom: env(safe-area-inset-bottom, 0px); --go-safe-left: env(safe-area-inset-left, 0px); }
html, body { width: 100%; height: auto; min-height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; background: #efe9da; color: #1d2820; font-family: 'Exo', sans-serif; }
body { background-image: radial-gradient(ellipse at 78% 3%, rgba(201, 112, 75, .11), transparent 32rem), repeating-linear-gradient(135deg, rgba(40, 70, 54, .025) 0 1px, transparent 1px 8px); }
button, select { font: inherit; }
.GoApp { min-height: 100vh; padding: 1.3rem clamp(1rem, 4vw, 3.5rem) 2rem; }
.GoViewport { container-type: inline-size; container-name: go-page; }
.go-phone .GoApp { min-height: var(--go-portrait-height); }
.go-phone .GoSubtitle { display: none; }
.go-phone .GoBoardFrame { width: min(100%, var(--go-board-side, 100%)); }
.go-counter-rotated, .go-counter-rotated body { height: var(--go-screen-height); min-height: 0; overflow: hidden; }
.go-counter-rotated .GoViewport { position: fixed; left: var(--go-screen-center-x); top: var(--go-screen-center-y); width: var(--go-portrait-width); height: var(--go-portrait-height); overflow-y: auto; overflow-x: hidden; transform: translate(-50%, -50%) rotate(var(--go-rotation)); }
.go-counter-rotated .GoApp { padding: .8rem .75rem 1.5rem; }
.go-counter-rotated .GoVictory { inset: auto; left: var(--go-screen-center-x); top: var(--go-screen-center-y); margin: 0; width: min(28rem, calc(var(--go-portrait-width) - 2rem)); max-height: calc(var(--go-portrait-height) - 2rem); transform: translate(-50%, -50%) rotate(var(--go-rotation)); overflow-y: auto; }
.GoHeader { max-width: 1240px; margin: 0 auto 1.4rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #c8c5b6; padding-bottom: 1.15rem; }
.GoBrand { color: #29392e; font: 700 .77rem 'Orbitron', sans-serif; text-decoration: none; }
.GoHeaderActions { justify-self: end; display: flex; align-items: center; gap: .4rem; }
.GoBrand span { color: #ba6045; }
.GoHeading { text-align: center; }
.GoEyebrow { margin: 0 0 .25rem; color: #a05039; font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.GoHeading h1 { margin: 0; color: #263b2d; font: 700 2rem 'Orbitron', sans-serif; }
.GoSubtitle { margin: .1rem 0 0; color: #62695e; font-size: .85rem; }
.GoExit { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid #a8aa98; border-radius: 3px; background: #f8f4e9; color: #a44731; font-size: 1.65rem; line-height: 1; text-decoration: none; }
.GoExit:hover, .GoExit:focus-visible { border-color: #a44731; outline: 2px solid rgba(164, 71, 49, .22); outline-offset: 2px; }
.GoLayout { width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.GoTable { min-width: 0; }
.GoToolbar { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: end; gap: .5rem; margin-bottom: .55rem; }
.GoGameSettings { min-width: 0; display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: .45rem; }
.GoGameSettings .GoBoardSize[hidden] { display: none; }
.GoGameSettings select { max-width: 100%; }
.GoBoardSize { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: .22rem; color: #59645a; font-size: .68rem; }
.GoBoardSize select { min-height: 2.25rem; border: 1px solid #a8aa98; border-radius: 3px; padding: .3rem .55rem; background: #faf7ed; color: #263b2d; font-weight: 700; }
.GoActions { display: flex; gap: .4rem; }
.GoIconButton { width: 2.25rem; min-width: 2.25rem; height: 2.25rem; padding: .25rem; font-size: 1.2rem; line-height: 1; }
.GoIconButton[hidden] { display: none; }
.GoHelp { display: grid; place-items: center; border: 1px solid #657462; border-radius: 50%; background: #f8f4e9; color: #314536; font-weight: 700; text-decoration: none; }
.GoHelp:hover, .GoHelp:focus-visible { border-color: #a44731; outline: 2px solid rgba(164, 71, 49, .22); outline-offset: 2px; }
.GoFullscreen .FullscreenExitIcon { display: none; grid-template-columns: repeat(2, .65rem); grid-template-rows: repeat(2, .65rem); place-items: center; font-family: monospace; font-size: .65rem; }
.GoFullscreen.active .FullscreenEnterIcon { display: none; }
.GoFullscreen.active .FullscreenExitIcon { display: grid; }
.GoActions button, .GoFinal button { display: inline-flex; min-height: 2.25rem; align-items: center; justify-content: center; gap: .35rem; border: 1px solid #657462; border-radius: 3px; padding: .35rem .65rem; background: #f8f4e9; color: #314536; font-size: .74rem; font-weight: 600; cursor: pointer; }
.GoActions button span { font-size: .69rem; }
.GoActions #undo-button, .GoActions #new-game-button { width: 2.25rem; min-width: 2.25rem; padding-inline: .25rem; }
.GoActions #undo-label, .GoActions #new-game-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.GoActions button:hover, .GoActions button:focus-visible, .GoFinal button:hover, .GoFinal button:focus-visible { border-color: #a44731; outline: 2px solid rgba(164, 71, 49, .22); outline-offset: 1px; }
.GoActions button:focus, .GoFinal button:focus, .GoBoardSize select:focus, .GoHeaderActions a:focus, .GoHeaderActions button:focus, .GoVictory button:focus { outline: 2px solid #a44731; outline-offset: 2px; }
.GoActions button:disabled { cursor: not-allowed; opacity: .45; }
.GoActions #pass-button { border-color: #a44731; background: #a44731; color: #fff9eb; }
.GoActions #pass-button:hover, .GoActions #pass-button:focus-visible { background: #873d2d; }
.GoStatus { min-height: 1.35rem; margin: 0 0 .4rem; color: #35513d; font-size: .8rem; font-weight: 700; text-align: center; }
.GoScoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; margin: 0 auto .65rem; width: min(100%, 720px); }
.GoPlayer { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .35rem .55rem; border-bottom: 2px solid transparent; }
.GoPlayer > div { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; gap: 0 .45rem; }
.GoPlayer strong { font-size: .75rem; }
.GoPlayer small { grid-column: 1 / -1; overflow: hidden; color: #727668; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.GoPlayer.is-current { border-color: #b65e43; background: rgba(255, 252, 239, .75); }
.GoScore { color: #2f4937; font: 700 1.1rem 'Exo', sans-serif; font-variant-numeric: tabular-nums; }
.GoScoreDivider { display: grid; gap: .1rem; justify-items: center; color: #687064; text-align: center; font-size: .62rem; text-transform: uppercase; }
.GoScoreDivider small { color: #a05039; font-size: .58rem; }
.GoStoneIcon { width: 1rem; height: 1rem; flex: 0 0 auto; border-radius: 50%; }
.GoStoneIconBlack { border: 1px solid #060908; background: radial-gradient(circle at 34% 28%, #5c655d, #111714 64%); box-shadow: 0 1px 2px #8b8a7d; }
.GoStoneIconWhite { border: 1px solid #b2b4a9; background: radial-gradient(circle at 35% 28%, #fffef5, #deded2 74%); box-shadow: 0 1px 2px #88897d; }
.GoBoardFrame { width: min(100%, 720px); aspect-ratio: 1; margin: 0 auto; padding: 3.5%; border: 1px solid #9a7247; background: linear-gradient(135deg, #e8ca8e, #d8b477 48%, #cba36c); box-shadow: 0 10px 28px rgba(53, 48, 35, .18), inset 0 0 0 3px rgba(255, 245, 211, .32); }
.GoBoard { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--board-size), minmax(0, 1fr)); grid-template-rows: repeat(var(--board-size), minmax(0, 1fr)); }
.GoPoint { position: relative; z-index: 0; min-width: 0; min-height: 0; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; background-color: transparent; background-image: linear-gradient(rgba(53, 48, 35, .78), rgba(53, 48, 35, .78)), linear-gradient(rgba(53, 48, 35, .78), rgba(53, 48, 35, .78)); background-position: center; background-repeat: no-repeat; background-size: 100% 1px, 1px 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.GoPoint::before, .GoPoint::after { content: ''; position: absolute; width: 70%; height: 70%; border-radius: 50%; pointer-events: none; }
.GoPoint.is-star::before { width: 20%; height: 20%; background: #493e2f; }
.GoPoint[data-stone='black']::after { z-index: 1; width: 88%; height: 88%; border: 1px solid #090c0a; background: radial-gradient(circle at 33% 26%, #525d54, #111613 66%); box-shadow: 0 2px 3px rgba(48, 37, 21, .55); }
.GoPoint[data-stone='white']::after { z-index: 1; width: 88%; height: 88%; border: 1px solid #aaa99d; background: radial-gradient(circle at 33% 26%, #fffef8, #e0dfd4 72%); box-shadow: 0 2px 3px rgba(48, 37, 21, .38); }
.GoPoint:not([data-stone])::after { width: 62%; height: 62%; background: #a85037; opacity: 0; transform: scale(.58); transition: opacity 100ms ease, transform 100ms ease; }
.GoPoint:not([data-stone]):hover::after, .GoPoint:not([data-stone]):focus-visible::after { opacity: .68; transform: scale(.45); }
.GoPoint.is-last-move[data-stone='black']::after, .GoPoint.is-last-move[data-stone='white']::after { outline: 2px solid #bd5036; outline-offset: -4px; }
.GoPoint.is-dead[data-stone]::after { opacity: .45; outline: 2px dashed #a44731; outline-offset: -3px; }
.GoPoint.is-dead-disputed[data-stone]::after { opacity: .62; outline: 2px dotted #34634b; outline-offset: -3px; }
.GoPoint.is-neutral:not([data-stone])::after { width: 46%; height: 46%; border: 2px solid #a44731; background: transparent; opacity: .9; transform: scale(1); }
.GoPoint:focus-visible { z-index: 2; outline: 2px solid #9c3f2a; outline-offset: -1px; }
.GoPoint:disabled { cursor: default; }
.GoFinal { width: min(100%, 720px); margin: .75rem auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem .7rem; border-left: 3px solid #ad573d; padding: .55rem .7rem; background: #e5dec9; color: #2c4232; font-size: .79rem; }
.GoFinal[hidden] { display: none; }
.GoFinal p { flex-basis: 100%; margin: 0; color: #5b6258; font-size: .72rem; line-height: 1.45; }
.GoFinal button { min-height: 1.9rem; flex: 0 0 auto; }
.GoFinal button[hidden] { display: none; }
.GoVictory { width: min(28rem, calc(100% - 2rem)); margin: auto; border: 1px solid #a8aa98; border-radius: 4px; padding: 1.2rem; background: #f8f4e9; color: #263b2d; box-shadow: 0 18px 50px rgba(23, 32, 25, .3); }
.GoVictory::backdrop { background: rgba(22, 31, 24, .62); }
.GoVictory h2 { margin: 0 0 .65rem; color: #294331; font: 700 1.15rem 'Orbitron', sans-serif; }
.GoVictory p { margin: 0 0 1rem; line-height: 1.6; font-weight: 600; }
.GoVictory button { display: block; min-height: 2.25rem; margin-inline-start: auto; border: 1px solid #657462; border-radius: 3px; padding: .35rem .75rem; background: #e5dec9; color: #314536; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.GoVictory button:hover, .GoVictory button:focus-visible { border-color: #a44731; outline: 2px solid rgba(164, 71, 49, .22); outline-offset: 2px; }
.GoApp .GoGamepadFocus { border-color: #a44731; outline: 2px solid #a44731; outline-offset: 2px; }
.GoConfirm .GoDialogActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.GoConfirm .GoDialogActions button { min-height: 2.4rem; margin: 0; }
.GoConfirm #confirm-new-game { border-color: #a44731; background: #a44731; color: #fff9eb; }
.GoConfirm #confirm-new-game:hover, .GoConfirm #confirm-new-game:focus-visible { background: #873d2d; }
@media (min-width: 900px) {
  .GoBoardFrame { width: min(100%, calc(100dvh - 21rem), 720px); }
}
@container go-page (max-width: 760px) {
  .GoApp { padding: calc(.8rem + var(--go-safe-top)) max(.75rem, var(--go-safe-right)) calc(1.5rem + var(--go-safe-bottom)) max(.75rem, var(--go-safe-left)); }
  .GoHeader { margin-bottom: .8rem; padding-bottom: .7rem; }
  .GoHeading h1 { font-size: 1.55rem; }
  .GoSubtitle { max-width: 45vw; font-size: .7rem; }
  .GoBrand { font-size: .62rem; }
  .GoHeaderActions { gap: .3rem; }
  .GoExit, .GoIconButton { width: 2rem; min-width: 2rem; height: 2rem; }
  .GoLayout { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .GoToolbar { display: flex; flex-wrap: wrap; gap: .45rem .65rem; }
  .GoGameSettings { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: .45rem; }
  .GoBoardFrame { width: min(100%, calc(100vw - 1.5rem)); }
}
@container go-page (max-width: 390px) {
  .GoActions { gap: .25rem; }
  .GoActions button { padding: .3rem .42rem; font-size: .67rem; }
  .GoActions button span { font-size: .63rem; }
  .GoBoardSize { gap: .3rem; font-size: .68rem; }
  .GoBoardSize select { padding-inline: .32rem; }
  .GoGameSettings { gap: .35rem; }
  .GoGameSettings .GoBoardSize { gap: .25rem; }
  .GoGameSettings .GoBoardSize select { max-width: 7.6rem; }
  .GoScoreboard { gap: .2rem; }
  .GoPlayer { gap: .3rem; padding-inline: .25rem; }
  .GoPlayer strong { font-size: .67rem; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .GoBoardFrame { width: min(100%, var(--go-board-side, 100%)); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .GoViewport:not(.GoPhoneViewport) .GoApp { height: var(--go-visible-height, 100dvh); min-height: 0; display: flex; flex-direction: column; padding: .35rem .65rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  .GoViewport:not(.GoPhoneViewport) .GoHeader { width: 100%; flex: 0 0 auto; margin-bottom: .45rem; padding-bottom: .35rem; }
  .GoViewport:not(.GoPhoneViewport) .GoBrand { font-size: .58rem; }
  .GoViewport:not(.GoPhoneViewport) .GoHeading h1 { font-size: 1.2rem; }
  .GoViewport:not(.GoPhoneViewport) .GoHeading .GoEyebrow { margin-bottom: 0; font-size: .53rem; }
  .GoViewport:not(.GoPhoneViewport) .GoSubtitle { display: none; }
  .GoViewport:not(.GoPhoneViewport) .GoExit, .GoViewport:not(.GoPhoneViewport) .GoIconButton { width: 1.8rem; min-width: 1.8rem; height: 1.8rem; }
  .GoViewport:not(.GoPhoneViewport) .GoHeaderActions { gap: .25rem; }
  .GoViewport:not(.GoPhoneViewport) .GoLayout { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: .7rem; }
  .GoViewport:not(.GoPhoneViewport) .GoTable { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(720px, var(--go-board-side, calc(100dvh - 5rem)), calc(100vw - 24rem)); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: .7rem; }
  .GoViewport:not(.GoPhoneViewport) .GoToolbar { grid-column: 1; grid-row: 1; gap: .35rem; margin-bottom: .15rem; }
  .GoViewport:not(.GoPhoneViewport) .GoBoardSize { gap: .3rem; font-size: .63rem; }
  .GoViewport:not(.GoPhoneViewport) .GoBoardSize select { min-height: 1.8rem; padding: .2rem .35rem; }
  .GoViewport:not(.GoPhoneViewport) .GoActions { gap: .25rem; }
  .GoViewport:not(.GoPhoneViewport) .GoActions button { min-height: 1.8rem; gap: .2rem; padding: .22rem .38rem; font-size: .62rem; }
  .GoViewport:not(.GoPhoneViewport) .GoActions button span { font-size: .58rem; }
  .GoViewport:not(.GoPhoneViewport) .GoIconButton { padding: .2rem; font-size: 1rem; }
  .GoViewport:not(.GoPhoneViewport) .GoFullscreen .FullscreenExitIcon { grid-template-columns: repeat(2, .55rem); grid-template-rows: repeat(2, .55rem); font-size: .55rem; }
  .GoViewport:not(.GoPhoneViewport) .GoStatus { grid-column: 1; grid-row: 2; min-height: 1rem; margin-bottom: .1rem; font-size: .64rem; }
  .GoViewport:not(.GoPhoneViewport) .GoScoreboard { grid-column: 1; grid-row: 3; width: 100%; gap: .2rem; margin-bottom: .3rem; }
  .GoViewport:not(.GoPhoneViewport) .GoPlayer { gap: .3rem; padding: .12rem .2rem; }
  .GoViewport:not(.GoPhoneViewport) .GoPlayer strong { font-size: .64rem; }
  .GoViewport:not(.GoPhoneViewport) .GoPlayer small { font-size: .5rem; }
  .GoViewport:not(.GoPhoneViewport) .GoScore { font-size: .85rem; }
  .GoViewport:not(.GoPhoneViewport) .GoScoreDivider { font-size: .5rem; }
  .GoViewport:not(.GoPhoneViewport) .GoScoreDivider small { font-size: .48rem; }
  .GoViewport:not(.GoPhoneViewport) .GoStoneIcon { width: .75rem; height: .75rem; }
  .GoViewport:not(.GoPhoneViewport) .GoBoardFrame { grid-column: 2; grid-row: 1 / 5; width: 100%; height: auto; margin: .5rem 0 0; padding: 2.5%; align-self: start; aspect-ratio: 1; }
  .GoViewport:not(.GoPhoneViewport) .GoFinal { grid-column: 1; grid-row: 4; width: 100%; margin-top: .3rem; padding: .3rem .45rem; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}