@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap');
:root{font-family:'Noto Sans SC',sans-serif;color:#242924;background:#f6f2e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 90% 0%,#eee7d7 0,transparent 36%),#f6f2e9}.shell{max-width:1340px;margin:auto;padding:0 48px}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedbd0}.brand{display:flex;align-items:center;gap:13px;color:#202821;text-decoration:none;font-size:24px;font-weight:700;letter-spacing:.02em}.brand-dot{color:#bc7651}.brand-mark{width:30px;height:30px;display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:5px;place-content:center;transform:rotate(-10deg)}.brand-mark i{background:#334a3a;border-radius:50%}.brand-mark i:last-child{background:#c78c62}.top-note{font-size:13px;color:#8e8d81;letter-spacing:.15em}.intro{padding:58px 0 54px;max-width:700px}.eyebrow{display:flex;align-items:center;gap:13px;color:#ad7756;font-size:11px;font-weight:700;letter-spacing:.28em}.eyebrow-line{width:26px;height:1px;background:#b77b5a}.intro h1{font-family:'Noto Serif SC',serif;font-size:clamp(46px,5vw,76px);font-weight:600;letter-spacing:-.055em;line-height:1.32;margin:19px 0 19px}.intro h1 em{font-style:normal;color:#ba7651}.intro p{font-size:14px;color:#777b70;line-height:1.9;margin:0;max-width:490px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}.board-card{background:#fffdf8;border:1px solid #e8e4d9;border-radius:18px;padding:22px;box-shadow:0 18px 45px #574c3210}.board-top,.board-bottom{display:flex;justify-content:space-between;align-items:center;color:#929186;font-size:12px;letter-spacing:.08em}.board-top{padding:0 5px 18px}.board-top b{color:#4b5348;font-weight:600;margin-left:8px}.board-bottom{padding:18px 5px 0}.board-bottom span:first-child{color:#526452}.board-wrap{width:100%;aspect-ratio:1;border-radius:9px;overflow:hidden;background:#e7c796;box-shadow:inset 0 0 0 1px #c9a979}canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:crosshair;outline:none}canvas:focus-visible{outline:3px solid #b36f4b;outline-offset:4px}.side{display:flex;flex-direction:column;gap:18px}.panel{background:#fffdf8;border:1px solid #e8e4d9;border-radius:16px;padding:25px;box-shadow:0 10px 30px #574c320a}.panel-kicker{font-size:12px;font-weight:700;color:#4d5c4d;letter-spacing:.12em;display:flex;justify-content:space-between;align-items:center}.panel-kicker span{font-weight:500;color:#9a9e94;letter-spacing:0}.players{margin:24px 0 18px;display:flex;flex-direction:column;gap:9px}.player{height:72px;display:flex;align-items:center;gap:14px;border-radius:10px;border:1px solid #eeeae0;padding:0 14px;background:#fbfaf6;transition:.2s}.player.active{border-color:#c7d1be;background:#eef2e9}.stone{width:36px;height:36px;border-radius:50%;flex:none}.stone.black{background:radial-gradient(circle at 30% 24%,#575a55,#111914 69%);box-shadow:2px 3px 5px #1114}.stone.white{background:radial-gradient(circle at 30% 23%,#fff,#e5e3dc 72%);border:1px solid #cfcec7;box-shadow:2px 3px 5px #1112}.player strong,.player small{display:block}.player strong{font-size:14px}.player small{color:#999e94;font-size:11px;margin-top:3px}.turn-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#69836b;opacity:0}.player.active .turn-dot{opacity:1}.status{min-height:48px;color:#415344;font-size:14px;font-weight:600;display:flex;align-items:center;border-top:1px solid #eeebe4;margin-top:12px}.wide{width:100%;height:43px;border-radius:8px;font:600 13px 'Noto Sans SC',sans-serif;cursor:pointer}.secondary{background:#fffdf8;border:1px solid #d9ded3;color:#435847}.secondary:hover{background:#f2f5ed}.connect-panel h2{font-family:'Noto Serif SC',serif;font-size:23px;font-weight:600;margin:22px 0 7px}.connect-panel p{color:#92968b;font-size:12px;line-height:1.8;margin:0 0 20px}.small-icon{font-size:17px}.primary{border:0;background:#334d3c;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 16px}.primary:hover{background:#263c2e}.primary span{font-size:19px;font-weight:400}.divider{height:38px;display:flex;align-items:center;gap:12px;color:#aaa99e;font-size:11px}.divider:before,.divider:after{content:'';height:1px;background:#eae7df;flex:1}#join-form{display:flex;height:43px;gap:8px}#join-code{min-width:0;flex:1;border:1px solid #e1e2d9;background:#fbfaf6;border-radius:8px;padding:0 12px;font:13px 'Noto Sans SC',sans-serif;text-transform:uppercase;outline:none}#join-code:focus{border-color:#809b81}.join-button{border:1px solid #d9ded3;border-radius:8px;padding:0 15px;background:#fff;color:#3e5741;font:600 13px 'Noto Sans SC',sans-serif;cursor:pointer}.join-button:hover{background:#f2f5ed}.room-info{padding-top:21px}.room-info>span{font-size:11px;color:#969a91}.room-code-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 13px}.room-code-row strong{font-size:28px;letter-spacing:.16em;font-weight:700;color:#334d3c}.copy-button{border:1px solid #d9ded3;background:#fff;border-radius:7px;padding:9px 10px;color:#425a45;font:11px 'Noto Sans SC',sans-serif;cursor:pointer;white-space:nowrap}.room-info p{margin:0 0 14px!important}.text-button{border:0;background:none;color:#a1745f;padding:0;font:12px 'Noto Sans SC',sans-serif;cursor:pointer}.text-button:hover{text-decoration:underline}.hidden{display:none}.rules{font-size:11px;color:#9d9e93;display:flex;gap:12px;padding:5px 3px}.rule-number{color:#bc8465;white-space:nowrap}footer{display:flex;justify-content:space-between;margin:67px 0 30px;border-top:1px solid #dedbd0;padding-top:21px;color:#a6a79a;font-size:11px;letter-spacing:.08em}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,15px);background:#253b2d;color:white;padding:10px 18px;border-radius:8px;box-shadow:0 10px 24px #0002;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.shell{padding:0 24px}.game-layout{grid-template-columns:minmax(0,1fr) 285px;gap:20px}.panel{padding:20px}}@media(max-width:720px){.shell{padding:0 16px}.topbar{height:69px}.brand{font-size:20px}.top-note{font-size:10px}.intro{padding:43px 0 33px}.intro h1{font-size:47px}.intro p{font-size:12px}.game-layout{display:flex;flex-direction:column;gap:18px}.board-card{width:100%;padding:12px;border-radius:13px}.board-top{padding:2px 4px 12px}.board-bottom{padding:12px 4px 2px}.side{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}.rules{grid-column:1/-1}.panel{padding:18px}.player{height:58px}.players{margin:15px 0 8px}.stone{width:29px;height:29px}.connect-panel h2{font-size:19px;margin:16px 0 4px}}@media(max-width:550px){.side{display:flex}.panel{padding:20px}.player{height:62px}.rules{font-size:10px}footer{margin-top:39px}.intro h1{font-size:43px}}