:root { color-scheme: light; font-family: "Microsoft YaHei", system-ui, sans-serif; background: #e8ece6; color: #172025; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; max-width: 1180px; margin: 0 auto; padding: 24px; }
.topbar { height: 52px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #cbd3cd; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 750; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: #f2e9d2; background: #ba3b30; font-size: 16px; }
.connection { display: flex; align-items: center; gap: 7px; color: #496059; font-size: 13px; }.connection i { width: 8px; height: 8px; border-radius: 50%; background: #3e8b60; }.connection.offline i { background: #b54a42; }
.join-panel { display: grid; grid-template-columns: 1fr 410px; gap: 72px; max-width: 900px; margin: 13vh auto 0; align-items: center; }
.eyebrow { margin: 0 0 12px; color: #ba3b30; font-weight: 700; font-size: 13px; }.join-copy h1 { margin: 0; font-size: 48px; font-weight: 750; line-height: 1.1; }.join-copy p:last-child { margin: 20px 0 0; color: #5d6866; line-height: 1.7; }
.join-form { display: grid; gap: 18px; padding: 28px; background: #f7f8f4; border: 1px solid #d6dcd7; box-shadow: 0 12px 30px #4a55421a; }.join-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }.join-form input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #bfc8c2; border-radius: 3px; background: white; outline-color: #1d7360; }.join-form button { height: 46px; border: 0; border-radius: 3px; color: white; background: #1d7360; font-weight: 700; }.form-error { min-height: 16px; margin: -8px 0 0; color: #b63d34; font-size: 12px; }
.game-panel { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; max-width: 940px; margin: 36px auto 0; align-items: start; }.game-info { padding-top: 12px; }.room-line { display: flex; align-items: center; gap: 8px; color: #65706b; font-size: 13px; }.room-line strong { color: #172025; letter-spacing: 1px; }.icon-button { border: 0; background: transparent; color: #46615a; font-size: 18px; }.status { margin: 24px 0; padding: 13px 15px; border-left: 3px solid #ba3b30; background: #f7f8f4; font-weight: 700; }.players { display: grid; gap: 10px; margin-bottom: 26px; }.player { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid transparent; }.player.me { border-color: #86aea2; background: #f2f6f2; }.player.disconnected { opacity: .5; }.stone { display: block; flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; background: #1f2425; box-shadow: inset 3px 3px 4px #ffffff22, 1px 2px 3px #1c252533; }.white .stone { background: #f8f7f1; border: 1px solid #c6c8c2; }.player small { display: block; color: #75817c; font-size: 11px; }.player strong { display: block; margin-top: 2px; font-size: 14px; }.secondary-button { width: 100%; height: 40px; border: 1px solid #9aa9a1; background: transparent; color: #293c36; border-radius: 3px; font-weight: 700; }.text-button { display: block; margin: 14px auto; border: 0; background: transparent; color: #65706b; font-size: 13px; }
.board-wrap { position: relative; width: min(100%, 610px); aspect-ratio: 1; padding: 34px 24px 24px 34px; background: #dda900; box-shadow: 0 18px 34px #2a302730; }.board { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); width: 100%; height: 100%; background: #f0d5ad; }.board::before { content: ""; position: absolute; z-index: 0; inset: 10%; border: 3px solid #101010; background-image: linear-gradient(to right, #101010 0 3px, transparent 3px), linear-gradient(to bottom, #101010 0 3px, transparent 3px); background-size: 25% 100%, 100% 25%; background-repeat: repeat-x, repeat-y; pointer-events: none; }.axis { position: absolute; z-index: 2; display: grid; color: #de1515; font-size: 21px; font-weight: 800; line-height: 1; pointer-events: none; }.axis-top { top: 7px; left: 34px; right: 24px; grid-template-columns: repeat(5, 1fr); text-align: center; }.axis-left { top: 34px; bottom: 24px; left: 8px; grid-template-rows: repeat(5, 1fr); align-items: center; }.cell { position: relative; z-index: 1; border: 0; background: transparent; padding: 0; overflow: visible; }.cell::after { content: ""; position: absolute; z-index: 1; inset: 50%; width: 62%; height: 62%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; }.cell.black::after, .cell.white::after { opacity: 1; }.cell.black::after { background: radial-gradient(circle at 35% 28%, #5c6665 0 4%, #232829 36%, #050606 100%); box-shadow: 2px 3px 5px #3e291e88; }.cell.white::after { background: radial-gradient(circle at 35% 25%, #fff 0 12%, #ebe9dd 55%, #b8b5a8 100%); box-shadow: 2px 3px 5px #3e291e66; }.cell.selected::after { outline: 4px solid #d62b27; outline-offset: 3px; }.cell.target::after { opacity: 1; width: 22%; height: 22%; background: #20a54a; box-shadow: 0 0 0 6px #ffffffaa; }.cell.captured::after { opacity: 1; background: #d3312d; animation: captured .55s ease-out; }.cell:focus-visible { z-index: 3; outline: 3px solid #1d7360; outline-offset: -2px; }.capture-note { min-height: 18px; margin: 18px 0 0; color: #b73b32; font-size: 13px; font-weight: 700; }@keyframes captured { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(.1); opacity: 0; } }.hidden { display: none; }
@media (max-width: 720px) { .app-shell { padding: 16px; }.join-panel { grid-template-columns: 1fr; gap: 30px; margin-top: 8vh; }.join-copy h1 { font-size: 38px; }.game-panel { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }.game-info { padding: 0; }.players { grid-template-columns: 1fr 1fr; }.board-wrap { margin: 0 auto; padding: 30px 18px 18px 30px; }.axis-top { top: 7px; left: 30px; right: 18px; font-size: 17px; }.axis-left { top: 30px; bottom: 18px; left: 7px; font-size: 17px; }.secondary-button { width: auto; padding: 0 20px; }.text-button { display: inline-block; margin-left: 16px; } }