@charset "UTF-8";
:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#252f2b;background:#f5f3ed;font-synthesis:none;--green:#275d48;--muted:#7e847c}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a6bca8;outline-offset:3px}header{max-width:1200px;margin:auto;padding:30px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedfd6}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:21px;font-weight:700;letter-spacing:2px}.brand-sub{font-size:10px;letter-spacing:2px;margin-left:4px;color:var(--muted)}.logo{display:grid;grid-template-columns:repeat(2,9px);gap:4px;transform:rotate(-10deg)}.logo i{width:9px;height:9px;border-radius:50%;background:#253b2e}.logo i:nth-child(2),.logo i:nth-child(3){background:#fafaf5;border:1px solid #879487}.header-note{font-size:12px;color:var(--muted);letter-spacing:2px}main{max-width:1100px;margin:auto;padding:43px 28px 0}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--green);display:flex;gap:8px;align-items:center}.eyebrow span{width:6px;height:6px;border-radius:50%;background:#518064}h1{font-size:48px;letter-spacing:-2px;margin:14px 0 13px;font-weight:650;line-height:1.2}.mobile-break{display:none}.intro>p{font-size:13px;letter-spacing:.4px;color:var(--muted);margin:0 0 30px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:28px;align-items:start}.board-card{background:#fcfbf7;border:1px solid #dedfd3;border-radius:18px;padding:23px;box-shadow:0 8px 30px #293e2906}.board-top,.board-footer{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#7b8075}.board-top{margin-bottom:19px}.board-top>span:first-child{display:flex;align-items:center;gap:8px}.board-top strong{color:#424e43;font-size:13px;font-weight:500}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#9aa68e;border:1px solid #838b7c}.dot.black{background:#2c322e}.dot.white{background:white}.board-wrap{position:relative;background:#dec69c;border-radius:8px;padding:5.2%;box-shadow:inset 0 0 40px #9f744c18;background-image:repeating-linear-gradient(3deg,transparent 0,transparent 6px,#b7935d09 7px,transparent 8px)}#board{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));aspect-ratio:1;position:relative}.cell{border:0;padding:0;position:relative;background:transparent;min-width:0;touch-action:manipulation;overflow:visible;opacity:1!important}.cell:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#9d8259aa}.cell:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:#9d8259aa}.cell:nth-child(15n+1):before{left:50%}.cell:nth-child(15n):before{right:50%}.cell:nth-child(-n+15):after{top:50%}.cell:nth-child(n+211):after{bottom:50%}.cell .piece{display:block;position:absolute;width:84%;height:84%;left:8%;top:8%;border-radius:50%;z-index:2}.cell[data-piece="1"] .piece{background:radial-gradient(circle at 35% 28%,#555a54,#252823 65%,#171d17);box-shadow:1px 2px 3px #352a2455}.cell[data-piece="2"] .piece{background:radial-gradient(circle at 35% 28%,#fff,#f3f2e9 65%,#cfcec3);box-shadow:1px 2px 3px #352a2444;border:1px solid #cdc7b3}.cell.star[data-piece="0"] .piece{width:17%;height:17%;top:42%;left:42%;background:#87704d}.cell[data-piece="1"] .piece,.cell[data-piece="2"] .piece{width:84%!important;height:84%!important;left:8%!important;top:8%!important}.cell.last .piece:after{content:"";width:22%;height:22%;position:absolute;left:39%;top:39%;background:#cf7759;border-radius:50%}.cell.win .piece{outline:2px solid #51866b;outline-offset:2px}.cell:enabled:hover .piece{width:70%;height:70%;top:15%;left:15%;background:#33463335}.cell:focus-visible{outline-offset:-2px;z-index:3}.board-footer{margin-top:19px;font-size:10px;letter-spacing:.5px}#board-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;background:#faf8f0eb;padding:13px 19px;border:1px solid #a49a7c33;border-radius:40px;font-size:12px;color:#645f4f;pointer-events:none;box-shadow:0 4px 20px #68573512}.panel{background:#fffefb;border:1px solid #dedfd3;padding:27px 24px;border-radius:18px}.card-index{font-size:9px;letter-spacing:1.6px;color:#8d9588;margin-bottom:22px}h2{font-size:23px;letter-spacing:-.7px;margin:0 0 14px;font-weight:650}.muted{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 25px}label{display:block;font-size:11px;color:#646f61;margin-bottom:10px}#code{display:block;width:100%;min-width:0;height:62px;border:1px solid #d8ddcf;border-radius:8px;background:#f8f9f2;text-align:center;font-size:27px;letter-spacing:10px;padding-left:17px;color:var(--green);font-family:ui-monospace,monospace}#code::placeholder{color:#c5ccbf}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;min-height:45px;border:0;border-radius:8px;font-size:12px}.primary{background:var(--green);color:#fff;margin-top:15px}.primary:hover{background:#1c4937}.primary span{margin-left:auto}#join-button{justify-content:space-between;padding:0 17px}.secondary{background:#eef0e7;color:#56624e;border:1px solid #e0e4d7;margin-top:12px}.text-button{display:block;background:transparent;border:0;color:#788472;font-size:11px;margin:17px auto;padding:5px}.text-button:hover{color:var(--green)}.tip{font-size:10px;color:#969c90;line-height:1.9;border-top:1px solid #eceee5;padding-top:17px;margin-top:20px}.rules{display:flex;align-items:center;gap:14px;margin:24px 4px}.rule-symbol{font-family:serif;font-size:24px;color:#87917c;border:1px solid #cbd2c1;width:43px;height:43px;display:grid;place-items:center;border-radius:50%;flex-shrink:0}.rules h3{font-size:12px;font-weight:500;margin:0 0 8px}.rules p{font-size:10px;color:#92998c;line-height:1.9;margin:0}footer{max-width:1044px;margin:37px auto 0;padding:24px 0 27px;border-top:1px solid #dedfd6;display:flex;justify-content:space-between;color:#969d90;font-size:10px;letter-spacing:1px}.room-title{display:flex;align-items:center;justify-content:space-between}.room-title h2{font-size:20px;margin:0}.small-button{font-size:10px;border:1px solid #dde2d5;background:#f7f9f1;border-radius:5px;color:#5b7058;padding:7px}#room-code{font:32px ui-monospace,monospace;letter-spacing:7px;margin:20px 0;color:var(--green)}.players{display:grid;gap:12px}.players>div{display:flex;align-items:center;gap:9px;font-size:12px;padding:10px 0;border-bottom:1px solid #eff0e9}.players small{font-size:9px;color:#809076}.players b{margin-left:auto;color:#809076;font-size:10px;font-weight:400}.stone{width:22px;height:22px;border-radius:50%;display:inline-block}.stone.black{background:radial-gradient(circle at 30% 25%,#555,#222)}.stone.white{background:linear-gradient(130deg,#fff,#eae9df);border:1px solid #d5d8cc}.room-message{font-size:12px;line-height:1.9;min-height:46px;color:#486548}#notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#263e32;color:#fff;box-shadow:0 5px 20px #0002;border-radius:9px;padding:13px 20px;z-index:20;font-size:12px;max-width:90vw}#notice:empty{display:none}[hidden]{display:none!important}dialog{border:1px solid #d8ddcf;border-radius:16px;padding:28px;width:min(380px,90vw);background:#fffef9;color:#253d2d}dialog::backdrop{background:#17241d66}dialog h2{font-size:20px}dialog p{font-size:13px;line-height:1.8;color:#7e847c}.dialog-actions{display:flex;gap:12px}.dialog-actions button{margin-top:10px}@media(min-width:1400px){main{padding-top:48px}.intro>p{margin-bottom:34px}}@media(max-width:800px){header{padding:22px}.header-note{font-size:10px;letter-spacing:0}.brand{font-size:18px}.brand-sub{display:none}main{padding:28px 16px 0}h1{font-size:36px;margin-top:12px}.intro>p{font-size:11px;line-height:1.8;margin-bottom:22px}.layout{grid-template-columns:minmax(0,1fr);gap:20px}.board-card{padding:17px;border-radius:14px;grid-row:2}.layout:has(#room-card:not([hidden])) .board-card{grid-row:1}.panel{padding:23px;border-radius:14px}.card-index{margin-bottom:15px}.muted br{display:none}.muted{margin-bottom:18px}.tip{margin-top:15px;padding-top:12px}.rules{display:none}.board-top{margin-bottom:15px}footer{margin:28px 16px 0;padding:20px 0;font-size:9px}.room-message{min-height:0}.players{grid-template-columns:1fr 1fr;gap:15px}#room-code{margin:16px 0}#board-hint{font-size:10px;padding:10px 14px}.eyebrow{font-size:9px;letter-spacing:2px}#join-card h2{font-size:21px}.board-footer{font-size:9px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}.cell[data-piece]:not([data-piece="0"]) .piece{animation:place .15s ease-out}@keyframes place{from{transform:scale(.8)}to{transform:scale(1)}}}
.countdown{font-size:12px;font-variant-numeric:tabular-nums;color:#956539;background:#f7f0df;padding:10px 12px;border-radius:7px;margin:-5px 0 16px}