:root { color: #12322a; background: #e7eadf; font-family: Georgia, 'Noto Serif SC', 'Songti SC', serif; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: linear-gradient(135deg, #e6e8db 0%, #f6f0de 52%, #c8ddd5 100%); }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 46px; }
.site-header { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #8ba59b; padding-bottom: 19px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #123c31; font-size: 26px; font-weight: 700; letter-spacing: 2px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border: 2px solid #123c31; border-radius: 50%; font-size: 18px; }
.brand-subtitle { color: #668077; font: 600 11px/1 Arial, sans-serif; letter-spacing: 2px; }
.game-layout { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(480px, 1.45fr); align-items: center; gap: clamp(38px, 8vw, 105px); padding-top: clamp(30px, 7vh, 76px); }
.game-panel { max-width: 310px; }
.eyebrow { margin: 0 0 12px; color: #bd573d; font: 700 12px/1 Arial, sans-serif; letter-spacing: 2px; }
h1 { margin: 0 0 32px; color: #14392f; font-size: clamp(34px, 4vw, 54px); line-height: 1.15; letter-spacing: 2px; }
.mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 17px; border: 1px solid #9eaea0; }.mode-button { min-height: 38px; border: 0; border-right: 1px solid #9eaea0; background: rgba(255, 250, 235, .45); color: #567067; font: 700 12px/1 Arial, sans-serif; letter-spacing: 1px; }.mode-button:last-child { border-right: 0; }.mode-button.active { color: #fff8e8; background: #14392f; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }.setting-row label { margin:0; white-space:nowrap; }.setting-row select { min-width:132px; border:1px solid #9aa99b; border-radius:2px; background:#fbf7e9; color:#244b3f; padding:7px; font-size:12px; }.mini-switch { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #9eaea0; }.mini-switch button { border:0; border-right:1px solid #9eaea0; padding:7px 8px; color:#567067; background:#fbf7e9; font-size:11px; }.mini-switch button:last-child { border-right:0; }.mini-switch button.active { color:#fff8e8; background:#315e50; }
.room-card { border-top: 2px solid #14392f; border-bottom: 1px solid #9eaea0; padding: 16px 0 17px; }
label { display: block; margin-bottom: 8px; color: #617a70; font: 700 11px/1 Arial, sans-serif; letter-spacing: 1.5px; }
.room-input-row { display: grid; grid-template-columns: 1fr 38px; gap: 7px; }
input { min-width: 0; border: 1px solid #9aa99b; border-radius: 2px; background: #fbf7e9; color: #133b30; padding: 9px 10px; font: 600 15px/1.2 ui-monospace, monospace; outline-color: #bd573d; }
.icon-button { border: 1px solid #9aa99b; border-radius: 2px; background: #fbf7e9; color: #14392f; font-size: 22px; line-height: 1; }
.secondary-button, .primary-button { width: 100%; border-radius: 2px; padding: 11px 14px; font: 700 13px/1 Arial, sans-serif; letter-spacing: 1px; }
.secondary-button { margin-top: 10px; border: 1px solid #48695e; background: transparent; color: #244b3f; }
.primary-button { border: 1px solid #14392f; background: #14392f; color: #fbf5e7; }
.action-row { display: grid; grid-template-columns: minmax(0, 1fr) 82px; gap: 8px; }.action-row .secondary-button { margin-top: 0; }.action-row [hidden] { display: none; }.stats { margin-top: 14px; color: #617a70; font: 12px/1.5 Arial, sans-serif; }
.clock { margin:0 0 12px; border-top:1px solid #aeb9aa; border-bottom:1px solid #aeb9aa; padding:8px 0; color:#274d40; font:700 13px/1 ui-monospace,monospace; text-align:center; }.spectator-count { margin:-8px 0 12px; color:#758b82; font:12px/1.4 Arial,sans-serif; }.leaderboard { margin-top:20px; border-top:1px solid #aeb9aa; padding-top:13px; }.leaderboard:empty { display:none; }.leaderboard h2 { margin:0 0 8px; color:#567067; font:700 11px/1 Arial,sans-serif; letter-spacing:1px; }.leaderboard div { display:grid; grid-template-columns:20px 1fr auto; gap:8px; padding:6px 0; border-bottom:1px solid rgba(158,174,160,.45); color:#355a4d; font:12px/1.2 Arial,sans-serif; }.leaderboard b { color:#bd573d; }.leaderboard small { color:#718077; font-size:11px; }.review-panel { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 12px; width:min(68vw,650px); margin-top:14px; color:#617a70; font:12px/1.2 Arial,sans-serif; }.review-panel .secondary-button { width:auto; margin:0; padding:8px 12px; grid-row:span 2; }.review-panel label { margin:0; }.review-panel input { width:100%; padding:0; }
.players { margin: 28px 0 20px; display: grid; gap: 13px; }
.player { display: grid; grid-template-columns: 21px 55px 1fr; align-items: center; gap: 8px; color: #395a4f; font-size: 14px; }
.player strong { color: #73847b; font: 600 12px/1 Arial, sans-serif; text-align: right; }
.stone { display: inline-block; width: 17px; height: 17px; border-radius: 50%; box-shadow: inset -2px -3px 4px rgba(0,0,0,.22), 1px 2px 3px rgba(0,0,0,.2); }
.stone.black { background: radial-gradient(circle at 33% 28%, #4a5c56 0 8%, #162720 34%, #06130f 100%); }
.stone.white { border: 1px solid #b8b9ac; background: radial-gradient(circle at 33% 25%, #fffef4 0 22%, #e9e7d7 72%, #c9cabb 100%); }
.status { min-height: 42px; margin: 0 0 13px; border-left: 3px solid #bd573d; padding: 11px 13px; background: rgba(255, 250, 235, .47); color: #21463a; font-size: 14px; }
.status[data-turn='white'] { border-left-color: #758b82; }
.status[data-turn='finished'] { border-left-color: #bd573d; }
.board-section { display: grid; justify-items: center; }
.board { display: grid; grid-template-columns: repeat(15, 1fr); width: min(68vw, 650px); aspect-ratio: 1; padding: 14px; border: 12px solid #b46d3f; box-shadow: 0 16px 30px rgba(32, 51, 40, .22), inset 0 0 0 2px #e3ad79; background-color: #e8b978; background-image: linear-gradient(#85522d 1px, transparent 1px), linear-gradient(90deg, #85522d 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.14), transparent 55%); background-size: calc((100% - 28px) / 14) calc((100% - 28px) / 14), calc((100% - 28px) / 14) calc((100% - 28px) / 14), 100% 100%; background-position: 14px 14px, 14px 14px, 0 0; }
.cell { display: grid; place-items: center; min-width: 0; min-height: 0; border: 0; padding: 0; background: transparent; }
.cell:not(:disabled):hover::after { content: ''; width: 58%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, #142b24 25%, transparent); }
.cell .stone { position: relative; z-index: 1; width: 78%; height: auto; aspect-ratio: 1; }
.cell.last-move .stone::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: #bd573d; box-shadow: 0 0 0 1px rgba(255,255,255,.32); }
.cell.winning-move .stone { outline: 2px solid #bd573d; outline-offset: 2px; }
.board-note { margin: 15px 0 0; color: #6a8378; font: 13px/1.4 Arial, sans-serif; letter-spacing: .5px; }
.toast { position: fixed; bottom: 22px; left: 50%; z-index: 3; transform: translate(-50%, 100px); max-width: calc(100vw - 36px); border: 1px solid #335c50; background: #14392f; color: #fff8e8; padding: 11px 16px; font: 14px/1.2 Arial, sans-serif; opacity: 0; transition: .18s ease; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 760px) { .app-shell { width: min(100% - 28px, 540px); padding-top: 18px; } .game-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 31px; } .game-panel { max-width: none; } h1 { margin-bottom: 23px; } .board { width: 100%; border-width: 9px; padding: 10px; background-size: calc((100% - 20px) / 14) calc((100% - 20px) / 14), calc((100% - 20px) / 14) calc((100% - 20px) / 14), 100% 100%; background-position: 10px 10px, 10px 10px, 0 0; } }