*{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0}body{color:#3e2723;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:radial-gradient(circle at 20% 30%,#4fc3f7,#0277bd 80%,#01579b);min-height:100vh;font-family:Comic Neue,Comic Sans MS,Chalkboard SE,PingFang SC,Microsoft YaHei,cursive,sans-serif}#app{min-height:100dvh}.loading-screen{z-index:999;background:radial-gradient(circle at 20% 30%,#4fc3f7,#0277bd 80%,#01579b);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-text{color:#ff8a80;text-shadow:0 0 14px #ff8a80b3;letter-spacing:3px;font-family:Luckiest Guy,Comic Sans MS,cursive;font-size:30px;font-weight:400;animation:1.1s ease-in-out infinite alternate loadingPulse}@keyframes loadingPulse{0%{opacity:.5}to{opacity:1}}.page{box-sizing:border-box;color:#3e2723;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:10;flex-direction:column;justify-content:flex-end;align-items:center;min-height:100dvh;padding:24px 16px 0;font-family:Comic Neue,Comic Sans MS,Chalkboard SE,PingFang SC,Microsoft YaHei,cursive,sans-serif;display:flex;position:relative}button{touch-action:manipulation}.bubbles{pointer-events:none;z-index:0;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.bubble{background:#ffffff4d;border:3px solid #ffffffbf;border-radius:50%;animation:linear infinite rise;position:absolute;bottom:-60px}.bubble:after{content:"";background:#ffffffe6;border-radius:50%;width:22%;height:22%;position:absolute;top:15%;left:25%;transform:rotate(-30deg)}@keyframes rise{0%{opacity:.95;transform:translateY(0)scale(1)rotate(0)}to{opacity:.35;transform:translateY(-110vh)scale(.8)rotate(720deg)}}.rain{pointer-events:none;z-index:1;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.card-rain{z-index:1;border-radius:inherit;position:absolute;inset:0}.drop{background:linear-gradient(#fff0,#bee1ffd9,#bee1ff4d);border-radius:2px;width:2px;height:72px;animation:linear infinite rainFall;position:absolute;top:-130px}@keyframes rainFall{0%{opacity:0;transform:translate(0,0)}12%{opacity:.95}88%{opacity:.95}to{opacity:0;transform:translate(-28px,125vh)}}.btn{color:#1a1a1a;cursor:pointer;letter-spacing:1px;background:#fff9c4;border:4px solid #1a1a1a;border-radius:60px;padding:12px 20px;font-family:inherit;font-size:17px;font-weight:700;transition:all 70ms;box-shadow:0 6px #c9a227,0 8px 16px #00000040}.btn:active{transform:translateY(6px);box-shadow:0 1px #c9a227}.btn.primary{color:#fff;text-shadow:2px 2px #0d47a1;background:#42a5f5;box-shadow:0 6px #0d47a1,0 8px 16px #00000040}.btn.primary:active{box-shadow:0 1px #0d47a1}.btn.big{width:100%;padding:16px 26px;font-size:20px}.btn.small{border-width:3px;padding:8px 16px;font-size:14px;box-shadow:0 4px #c9a227}.btn.small:active{transform:translateY(4px);box-shadow:0 0 #c9a227}.btn.primary.small{box-shadow:0 4px #0d47a1}.btn.primary.small:active{box-shadow:0 0 #0d47a1}.btn.offline{color:#fff;text-shadow:2px 2px #b71c1c;background:#ff8a80;box-shadow:0 6px #b71c1c,0 8px 16px #00000040}.btn.offline:active{box-shadow:0 1px #b71c1c}.btn.ghost{box-shadow:none;color:#5d4037;background:0 0;border-color:#0000}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.lobby,.waiting,.game{background-color:#ffe135;background-image:linear-gradient(45deg,#0000 46%,#9a761a29 47% 53%,#0000 54%),linear-gradient(-45deg,#0000 46%,#9a761a29 47% 53%,#0000 54%);background-size:46px 46px;border:6px solid #1a1a1a;border-radius:46% 46% 40% 40%/30% 30% 24% 24%;width:100%;max-width:880px;padding:44px 46px 46px;position:relative;box-shadow:12px 12px #b06d1c,inset 0 -8px #cc9b2e,0 20px 40px #00000080}.pine-leaves{z-index:5;pointer-events:none;filter:drop-shadow(0 8px 10px #00000052);width:88%;height:auto;position:absolute;top:0;left:50%;transform:translate(-50%)translateY(-92%)}.lobby{text-align:center;flex-direction:column;gap:14px;max-width:430px;margin-bottom:20px;display:flex}.logo{color:#ff3b3b;text-shadow:-3px -3px #fff,3px -3px #fff,-3px 3px #fff,3px 3px #fff,0 5px #9e2a2a;letter-spacing:2px;font-family:Luckiest Guy,Comic Sans MS,cursive;font-size:30px;font-weight:400;transform:rotate(-1deg)}.subtitle{color:#3e2723;background:#a5d6a7;border:3px solid #1a1a1a;border-radius:40px;width:fit-content;margin:-4px auto 8px;padding:5px 16px;font-size:14px;font-weight:700;box-shadow:inset 0 -3px #4caf50}.name-row{gap:10px;display:flex}.name-input,.code-input{color:#3e2723;background:#fff9c4;border:4px solid #1a1a1a;border-radius:20px;outline:none;flex:1;padding:12px;font-family:inherit;font-size:17px;font-weight:700;box-shadow:inset 0 -3px #d4c47a}.name-input:focus,.code-input:focus{box-shadow:inset 0 -3px #d4c47a,0 0 0 4px #42a5f566}.divider{color:#3e2723;align-items:center;gap:10px;font-size:14px;font-weight:700;display:flex}.divider:before,.divider:after{content:"";background:#c9a227;border-radius:3px;flex:1;height:3px}.join-row{gap:10px;display:flex}.code-input{text-transform:uppercase;letter-spacing:6px;text-align:center;font-weight:900}.hint{color:#5d4037;font-size:12px;font-weight:700}.credit{color:#3e27238c;letter-spacing:1px;margin-top:8px;font-size:12px;font-weight:700}.size-select{background:#f8f0d5;border:3px solid #1a1a1a;border-radius:999px;justify-content:center;align-items:center;gap:8px;width:fit-content;margin:0 auto;padding:5px 6px 5px 14px;display:flex;box-shadow:inset 0 -3px #d4c47a}.size-label{color:#5d4037;font-size:13px;font-weight:900}.size-opt{color:#5d4037;cursor:pointer;background:#fff9c4;border:3px solid #1a1a1a;border-radius:999px;padding:4px 10px;font-family:inherit;font-size:13px;font-weight:900;transition:all 70ms;box-shadow:0 3px #c9a227}.size-opt:active{transform:translateY(3px);box-shadow:0 0 #c9a227}.size-opt.active{color:#fff;text-shadow:1px 1px #0d47a1;background:#42a5f5;box-shadow:0 3px #0d47a1}.size-opt:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 3px #c9a227}.size-note{color:#5d4037;font-size:11px;font-weight:700}.waiting{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.room-label{color:#3e2723;font-size:17px;font-weight:700}.room-code{letter-spacing:12px;color:#1565c0;text-shadow:2px 2px #fff;background:#f8f0d5;border:5px solid #1a1a1a;border-radius:30px;padding:14px 24px;font-family:Luckiest Guy,Comic Sans MS,cursive;font-size:46px;font-weight:400;box-shadow:inset 0 -6px #d4c47a,0 8px 16px #00000040}.room-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.spinner-wrap{color:#5d4037;flex-direction:column;align-items:center;gap:10px;font-size:15px;font-weight:700;display:flex}.spinner{border:5px solid #1a1a1a33;border-top-color:#1565c0;border-radius:50%;width:30px;height:30px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.game{flex-direction:column;align-items:center;gap:12px;display:flex}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;width:100%;margin-top:55px;font-size:14px;display:flex}.opp{align-items:center;gap:6px;font-weight:700;display:flex}.opp-dot{background:#ef5350;border:2px solid #1a1a1a;border-radius:50%;width:10px;height:10px}.opp-dot.on{background:#66bb6a;box-shadow:0 0 8px #66bb6a}.opp-color{color:#5d4037}.me{color:#1565c0;font-weight:900}.turn-chip{color:#5d4037;background:#f8f0d5;border:3px solid #1a1a1a;border-radius:999px;padding:6px 14px;font-size:15px;font-weight:900;transition:all .15s;box-shadow:inset 0 -3px #d4c47a}.turn-chip.active{color:#1a1a1a;background:#ffe135;box-shadow:inset 0 -3px #c9a227,0 0 0 4px #ffe13599}.vs{color:#5d4037;font-size:16px;font-weight:900}.timer-chip{color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.5px;background:#1565c0;border:3px solid #1a1a1a;border-radius:999px;padding:6px 14px;font-size:15px;font-weight:900;box-shadow:inset 0 -3px #0d47a1}.exit-btn{color:#fff;text-shadow:1px 1px #b71c1c;cursor:pointer;background:#ff8a80;border:3px solid #1a1a1a;border-radius:999px;padding:6px 12px;font-family:inherit;font-size:13px;font-weight:900;transition:all 70ms;box-shadow:0 3px #b71c1c}.exit-btn:active{transform:translateY(3px);box-shadow:0 0 #b71c1c}.status{color:#3e2723;background:#f8f0d5;border:4px solid #1a1a1a;border-radius:60px;padding:8px 24px;font-size:18px;font-weight:900;box-shadow:inset 0 -4px #d4c47a}.status.mine{color:#1565c0}.turn-owner{color:#5d4037;font-size:14px;font-weight:900}.board-wrap{aspect-ratio:1;box-sizing:border-box;background:#d7a86e;border:5px solid #5d3a1a;border-radius:40px 40px 30px 30px;width:min(94vw,66dvh,720px);padding:12px;box-shadow:inset 0 -6px #8b5a2b,0 10px 20px #0000004d}.board{background:#f5d6a8;border:4px solid #4e2e0e;border-radius:12px;width:100%;height:100%;display:grid;position:relative;box-shadow:inset 0 0 0 2px #b48b5a}.board-bg{object-fit:cover;z-index:0;pointer-events:none;filter:blur(5px)brightness(.62)saturate(.9);opacity:.85;border-radius:8px;width:100%;height:100%;position:absolute;inset:0}.board-grid{z-index:1;pointer-events:none;background-image:linear-gradient(#fffaeb80 1px,#0000 1px),linear-gradient(90deg,#fffaeb80 1px,#0000 1px);border-radius:8px;position:absolute;inset:0}.cell{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:2px dashed #4e2e0ec7;border-top:none;border-left:none;padding:0;position:relative}.cell.no-r{border-right:none}.cell.no-b{border-bottom:none}.cell:disabled{cursor:default;opacity:1}.cell:not(:disabled):hover:after{content:"";background:#1565c033;border-radius:50%;position:absolute;inset:20%}.stone{border:3px solid #1a1a1a;border-radius:50%;animation:.25s ease-out popIn;position:absolute;inset:8%;box-shadow:inset -4px -4px #0003,0 4px 8px #00000080}.stone.black{background:radial-gradient(circle at 35% 30%,#6a8cff,#1a237e 80%,#0d0d2b);box-shadow:inset -4px -4px #0f0f3a,0 4px 8px #0009,0 0 15px #64c8ff4d}.stone.white{background:radial-gradient(circle at 30% 25%,#fff,#ffe0bd 70%,#fbc49e);box-shadow:inset -4px -4px #c59b7a,0 4px 8px #0006,0 0 20px #ffc89680}.stone.last:after{content:"";border:3px solid #ff3b3b;border-radius:50%;position:absolute;inset:-14%;box-shadow:0 0 10px #ff3b3bb3}.stone.preview{opacity:.5}@keyframes popIn{0%{transform:scale(.2)rotate(-30deg)}80%{transform:scale(1.2)rotate(5deg)}to{transform:scale(1)rotate(0)}}.corner{flex-direction:column;align-items:center;gap:7px;display:flex}.mini-confirm{align-items:center;gap:6px;display:flex}.mini-btn{cursor:pointer;border:3px solid #1a1a1a;border-radius:999px;padding:4px 14px;font-family:inherit;font-size:13px;font-weight:900;line-height:1.2;transition:all 70ms;box-shadow:0 3px #c9a227}.mini-btn:active{transform:translateY(3px);box-shadow:0 0 #c9a227}.mini-btn.ok{color:#fff;text-shadow:1px 1px #0d47a1;background:#42a5f5;box-shadow:0 3px #0d47a1}.mini-btn.cancel{color:#fff;text-shadow:1px 1px #b71c1c;background:#ff8a80;box-shadow:0 3px #b71c1c}.mini-btn:disabled{opacity:.4;cursor:not-allowed;filter:saturate(.3);transform:none;box-shadow:0 3px #c9a227}.result-mask{z-index:20;background:#00152b99;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.result-card{text-align:center;background:#ffe135;border:6px solid #1a1a1a;border-radius:40px;width:min(86vw,340px);padding:28px 20px;box-shadow:10px 10px #b06d1c,0 20px 40px #00000080}.result-title{color:#ff3b3b;text-shadow:-3px -3px #fff,3px -3px #fff,-3px 3px #fff,3px 3px #fff,0 5px #9e2a2a;margin-bottom:6px;font-family:Luckiest Guy,Comic Sans MS,cursive;font-size:28px;font-weight:400}.result-sub{color:#5d4037;margin-bottom:20px;font-size:15px;font-weight:700}.result-actions{flex-direction:column;gap:12px;display:flex}.toast{color:#3e2723;z-index:30;white-space:nowrap;background:#ffe135;border:4px solid #1a1a1a;border-radius:999px;padding:10px 22px;font-size:15px;font-weight:900;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 5px #b06d1c,0 8px 16px #0000004d}.toast-enter-active,.toast-leave-active{transition:opacity .2s,transform .2s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%)translateY(-8px)}@media (width<=480px){.lobby,.waiting,.game{padding:28px 24px 30px}.logo{font-size:24px}.subtitle{padding:4px 12px;font-size:12px}.name-input,.code-input{padding:10px;font-size:15px}.btn{padding:10px 16px;font-size:15px}.btn.big{padding:14px 20px;font-size:17px}.room-code{letter-spacing:8px;padding:10px 16px;font-size:34px}.status{padding:6px 16px;font-size:15px}.timer-chip,.turn-chip{padding:5px 10px;font-size:13px}.exit-btn{padding:5px 10px;font-size:12px}.mini-btn{padding:3px 10px;font-size:12px}.size-opt{padding:3px 8px;font-size:12px}.pine-leaves{width:78%}.topbar{gap:4px}.credit{font-size:11px}}