*{box-sizing:border-box} :root{color-scheme:light;--ink:#233e3a;--gold:#b69053;--paper:#fffcf4;--muted:#6d776e;--line:#ddd4c1}body{margin:0;background:#eee9dd;color:var(--ink);font:15px/1.6 system-ui,sans-serif;background-image:radial-gradient(at 10% 10%,#faf6e8 0,transparent 55%)}header{padding:18px max(24px,calc((100vw - 1160px)/2));border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}header>div{display:flex;align-items:center;gap:15px}.brand{color:var(--ink);text-decoration:none;font-weight:750;letter-spacing:.22em}.brand span{font-size:10px;letter-spacing:.3em;display:block}.unit{font-size:12px;color:var(--muted)}main{max-width:1160px;margin:auto;padding:28px 24px}.intro{text-align:center;margin:10px 0 28px}.eyebrow{letter-spacing:.22em;font-size:10px;font-weight:700;color:#89693d;margin:0 0 12px}h1{font:clamp(28px,4vw,48px)/1.14 Georgia,serif;margin:8px 0 14px}h2{font:26px/1.25 Georgia,serif;margin:0 0 16px}h3{font-size:15px}p{margin:10px 0 16px}nav{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}button,a.button{cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:#fffaf0;border-radius:7px;padding:11px 16px;font:inherit;font-weight:600;display:inline-block;text-decoration:none}button.quiet{background:transparent;color:var(--ink);border-color:#c7bcaa}button:hover,a.button:hover{filter:brightness(1.12)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d4a44a;outline-offset:3px}button:disabled{opacity:.45;cursor:default}nav button{background:var(--paper);color:var(--ink);border-color:var(--line);padding:16px 8px}nav button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 3px 8px #233e3a26}nav .icon{display:block;font-size:28px;line-height:1.2}nav small{display:block;font-weight:400;font-size:11px;margin-top:5px}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.paper{background:var(--paper);padding:27px;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 16px #2e362508}label{display:block;font-size:13px;margin:18px 0 7px}input,select{font:inherit;border:1px solid #cbbfa9;border-radius:6px;background:white;color:var(--ink);padding:10px;width:100%}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0}#notice{min-height:25px;color:#885124}#notice:empty{margin:6px}#tables{margin-top:24px}#tables article{padding:12px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}#tables small{display:block;color:var(--muted)}#tables button{padding:6px 10px;font-size:13px}.muted{color:var(--muted);font-size:13px}details{border-top:1px solid var(--line);padding-top:12px}summary{cursor:pointer;font-weight:600}.table-heading{display:flex;align-items:center;gap:12px;margin:16px 0}.table-heading>div{flex:1}.table-heading h2{font-size:22px;margin:0}.play-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px}.board-wrap{min-width:0}.seat{padding:12px 2px;font-weight:650;display:flex;justify-content:space-between}#board{display:grid;aspect-ratio:1;max-width:690px;border:12px solid #775433;border-radius:5px;box-shadow:0 8px 26px #3e322a24;background:#d6b777;overflow:hidden;position:relative}#board button{border:0;border-radius:0;margin:0;padding:0;min-width:0;font-weight:400;position:relative;background:#ecd9ad;color:#1f3434;font-size:clamp(19px,4.5vw,49px);line-height:1;aspect-ratio:1;display:grid;place-items:center;opacity:1;touch-action:manipulation}#board button.dark{background:#73867d}#board button.selected{background:#e2b456!important;box-shadow:inset 0 0 0 3px #8c5d25}#board button.last{box-shadow:inset 0 0 0 3px #b48731}#board button.hint:after{content:'';position:absolute;inset:39%;border-radius:50%;background:#1f5b45aa;pointer-events:none}#board button.hint:not(:empty):after{inset:6%;border:3px solid #368765;background:transparent}#board .piece-white{color:#fffaf0;text-shadow:0 1px 2px #182724,1px 0 #182724,-1px 0 #182724}#board.xiangqi{aspect-ratio:9/10;border-color:#986c3e}#board.xiangqi button{background:#e3c493;font-size:clamp(17px,3vw,30px)}#board.xiangqi button:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 49%,#896b454f 49%,#896b454f 51%,transparent 51%),linear-gradient(transparent 49%,#896b454f 49%,#896b454f 51%,transparent 51%);pointer-events:none}#board .xi-piece{z-index:1;border:2px solid currentColor;background:#f5ddb2;box-shadow:0 2px 4px #71512a55;border-radius:50%;width:80%;height:80%;display:grid;place-items:center;color:#963b2b}#board .xi-piece.black{color:#263e39}#board .river{font-size:9px;letter-spacing:.08em;position:absolute;bottom:0;color:#927348;z-index:1}#board.gomoku{border-width:8px}#board.gomoku button{background:#dec390;font-size:20px;background-image:linear-gradient(90deg,transparent 49%,#89734d60 49%,#89734d60 51%,transparent 51%),linear-gradient(transparent 49%,#89734d60 49%,#89734d60 51%,transparent 51%)}.stone{width:79%;height:79%;border-radius:50%;display:block;background:radial-gradient(at 30% 25%,#65716a,#172a22 80%);box-shadow:1px 2px 3px #14302566}.stone.light{background:radial-gradient(at 30% 25%,white,#dedac9 80%)}#board.reversi button{background:#326654;border:1px solid #153c3155}.compact{padding:18px;margin-bottom:14px}#history{max-height:170px;overflow:auto;font-size:13px;padding-left:25px}#messages{max-height:180px;overflow:auto;font-size:13px}#messages p{margin:6px 0;overflow-wrap:anywhere}#chat{display:flex;gap:6px;margin-top:15px}#chat input{min-width:0}#chat button{padding:8px 10px}footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:30px 0 5px;color:var(--muted);font-size:12px}footer a{color:var(--ink)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:780px){header{padding:12px 16px}main{padding:20px 12px}nav{gap:6px}nav button{font-size:12px;padding:11px 3px}nav small{display:none}.lobby-grid,.play-grid{grid-template-columns:1fr}.paper{padding:20px}.intro{margin-bottom:20px}.table-heading{flex-wrap:wrap}.table-heading>div{width:100%;flex-basis:100%}.play-grid aside{display:grid;grid-template-columns:1fr 1fr;gap:10px}#board button{font-size:clamp(22px,8vw,48px)}#board.xiangqi button{font-size:clamp(15px,5vw,30px)}}@media(max-width:480px){.play-grid aside{display:block}.brand{font-size:12px}.actions button{font-size:13px;padding:9px 11px}.intro p:not(.eyebrow){font-size:13px}.table-heading h2{font-size:20px}}
/* Keep the whole board within a normal desktop view; touch layouts may scroll. */
.playing .intro,.playing #games{display:none}.playing main{padding-top:8px}.playing .table-heading{margin:8px 0 12px}.playing #board{width:min(100%,calc(100svh - 230px));margin:auto}.playing #board.xiangqi{width:min(100%,calc((100svh - 230px)*.9))}.playing .seat{max-width:690px;margin:auto;padding:6px 2px}.playing #move-hint{text-align:center;margin:8px 0}.playing #notice:empty{min-height:0}.playing header{padding-top:10px;padding-bottom:10px}@media(max-height:500px){.playing #board,.playing #board.xiangqi{width:100%;max-width:500px}}@media(max-width:780px){.playing #board{width:100%;max-width:560px}.playing #board.xiangqi{width:100%;max-width:500px}}

#board.xiangqi{background-color:#e3c493;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%201000%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238f714d%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M50%2050H850%22%2F%3E%3Cpath%20d%3D%22M50%20150H850%22%2F%3E%3Cpath%20d%3D%22M50%20250H850%22%2F%3E%3Cpath%20d%3D%22M50%20350H850%22%2F%3E%3Cpath%20d%3D%22M50%20450H850%22%2F%3E%3Cpath%20d%3D%22M50%20550H850%22%2F%3E%3Cpath%20d%3D%22M50%20650H850%22%2F%3E%3Cpath%20d%3D%22M50%20750H850%22%2F%3E%3Cpath%20d%3D%22M50%20850H850%22%2F%3E%3Cpath%20d%3D%22M50%20950H850%22%2F%3E%3Cpath%20d%3D%22M50%2050V450M50%20550V950%22%2F%3E%3Cpath%20d%3D%22M150%2050V450M150%20550V950%22%2F%3E%3Cpath%20d%3D%22M250%2050V450M250%20550V950%22%2F%3E%3Cpath%20d%3D%22M350%2050V450M350%20550V950%22%2F%3E%3Cpath%20d%3D%22M450%2050V450M450%20550V950%22%2F%3E%3Cpath%20d%3D%22M550%2050V450M550%20550V950%22%2F%3E%3Cpath%20d%3D%22M650%2050V450M650%20550V950%22%2F%3E%3Cpath%20d%3D%22M750%2050V450M750%20550V950%22%2F%3E%3Cpath%20d%3D%22M850%2050V450M850%20550V950%22%2F%3E%3Cpath%20d%3D%22M50%20450V550M850%20450V550M350%2050L550%20250M550%2050L350%20250M350%20750L550%20950M550%20750L350%20950%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:100% 100%}#board.xiangqi button{background:transparent}#board.xiangqi button:before{display:none}#board.xiangqi .river-title{position:absolute;top:50%;transform:translate(-50%,-50%);font:clamp(12px,2vw,20px) Georgia,serif;color:#8b613b;pointer-events:none;letter-spacing:.15em}

.board-scroll{max-width:100%;overflow:auto}.playing #board.gomoku{min-width:390px}