:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f0e5;
  background: #0c1816;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 8%, rgba(66, 137, 111, .23), transparent 34rem),
    linear-gradient(145deg, #0b1715, #132721 62%, #0b1514);
}

button, a { font: inherit; }
button { touch-action: manipulation; }

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0 24px; }
.hero { display: flex; gap: 28px; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.eyebrow { margin: 0 0 6px; color: #d4a75f; font-size: .73rem; font-weight: 800; letter-spacing: .17em; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.2rem, 6vw, 4.7rem); font-weight: 500; letter-spacing: -.045em; }
.lede { max-width: 660px; margin: 9px 0 0; color: #b8c5c0; line-height: 1.55; }

.size-picker { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; color: #9fb0a9; }
.size-picker > span { margin-right: 3px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.size-picker button, .actions button {
  border: 1px solid #385149;
  border-radius: 999px;
  padding: 9px 13px;
  color: #dce5e1;
  background: rgba(16, 39, 34, .82);
  cursor: pointer;
}
.size-picker button:hover, .size-picker button:focus-visible, .actions button:hover, .actions button:focus-visible { border-color: #d4a75f; outline: none; }
.size-picker button.active { border-color: #e0b66f; color: #18231f; background: #e0b66f; }

.play-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: 22px; align-items: start; }
.board-card, .side-card { border: 1px solid rgba(223, 185, 118, .2); box-shadow: 0 24px 80px rgba(0,0,0,.26); }
.board-card { min-width: 0; padding: clamp(10px, 2vw, 20px); border-radius: 28px; background: linear-gradient(150deg, #263d35, #152923); }
#board { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 19px; background: #d4a355; }
.board-mount { width: 100% !important; max-width: 100% !important; }
.besogo-container { background: transparent; }
.besogo-board { border-radius: 15px; overflow: hidden; }
.besogo-svg-board { fill: #d8a956; }
.besogo-svg-lines { stroke: #24342f; stroke-width: 2.3; }
.besogo-svg-hoshi { stroke: #26352f; }
.besogo-svg-blackStone { fill: #14201d; stroke: #08100e; }
.besogo-svg-whiteStone { fill: #f5efe1; stroke: #d8d0bf; }

.side-card { padding: 22px; border-radius: 24px; background: rgba(13, 29, 25, .86); backdrop-filter: blur(16px); }
.turn-card { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid #2d433c; }
.stone { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset -7px -8px 13px rgba(0,0,0,.23), 0 8px 18px rgba(0,0,0,.24); }
.stone.black { background: #17211f; border: 1px solid #47534e; }
.stone.white { background: #f4eddf; border: 1px solid #fff; }
.label { display: block; color: #8fa198; font-size: .68rem; font-weight: 800; letter-spacing: .15em; }
.turn-card strong { display: block; margin-top: 2px; font-family: Georgia, serif; font-size: 1.6rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.stats div { padding: 12px 7px; border-radius: 13px; text-align: center; background: #152c26; }
.stats span { display: block; min-height: 30px; color: #91a29b; font-size: .7rem; line-height: 1.25; }
.stats strong { font-size: 1.35rem; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions button { border-radius: 12px; padding: 11px 8px; }
.actions button:first-child, .actions .danger { grid-column: span 2; }
.actions .danger { color: #e6b2a5; border-color: #5b3c36; }
.rules { margin-top: 20px; padding-top: 17px; border-top: 1px solid #2d433c; }
.rules h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.25rem; }
.rules p { margin: 8px 0 0; color: #a9b8b2; font-size: .86rem; line-height: 1.5; }
footer { margin-top: 19px; color: #7f958c; font-size: .78rem; }
footer a { color: #cba461; }

@media (max-width: 820px) {
  .hero { align-items: start; flex-direction: column; }
  .play-area { grid-template-columns: 1fr; }
  .side-card { width: 100%; }
}

@media (max-width: 480px) {
  .shell { width: min(100% - 18px, 1180px); padding-top: 20px; }
  .board-card { border-radius: 19px; }
  .side-card { padding: 17px; }
}