*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Hiragino Kaku Gothic ProN,Yu Gothic UI,Meiryo,sans-serif;background:radial-gradient(120% 120% at 30% 20%,#20293d,#131826 55%,#0b0e17);color:#e8e6df;overflow:hidden}.hidden{display:none!important}.screen{position:fixed;top:0;right:0;bottom:0;left:0}#screen-title{overflow-y:auto;display:flex;justify-content:center}.title-wrap{max-width:860px;width:100%;padding:48px 24px 64px}.game-title{font-size:56px;margin:0 0 4px;letter-spacing:.12em;text-align:center;background:linear-gradient(180deg,#fff,#b8c4e0);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{text-align:center;color:#9aa6c0;margin:0 0 36px}.menu-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.menu-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px 24px;width:340px;display:flex;flex-direction:column;gap:14px}.menu-card h2{margin:0 0 4px;font-size:20px;color:#ffd76e}.menu-card label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#aab4cc}select,input[type=number],input[type=text]{background:#1d2435;border:1px solid #3a4663;color:#e8e6df;border-radius:8px;padding:9px 10px;font-size:15px}button{background:#2a3450;border:1px solid #46557a;color:#e8e6df;border-radius:8px;padding:10px 14px;font-size:15px;cursor:pointer;transition:background .15s}button:hover{background:#38456a}button:disabled{opacity:.45;cursor:default}button.primary{background:#d8a93f;border-color:#f0c463;color:#221a05;font-weight:700}button.primary:hover{background:#e9bb52}button.danger{background:#5a2f33;border-color:#8a4a50}button.danger:hover{background:#74383e}.join-row{display:flex;gap:8px}.join-row input{flex:1;text-transform:uppercase;letter-spacing:.15em}#online-status{font-size:14px;color:#ffd76e;min-height:1.2em;white-space:pre-wrap}#online-status .room-code{font-size:30px;letter-spacing:.25em;font-weight:700;color:#fff;display:block;margin:6px 0}.github-corner{position:fixed;top:0;right:0;z-index:5}.github-corner svg{display:block;fill:#ffd76e;color:#131826}.github-corner:hover svg{fill:#ffe49b}.github-corner .octo-arm{transform-origin:130px 106px}.github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}.tutorial-row{text-align:center;margin:-16px 0 28px}#btn-tutorial{background:#ffd76e1f;border-color:#ffd76e8c;color:#ffd76e;font-size:14px}#btn-tutorial:hover{background:#ffd76e38}.rules{margin:36px auto 0;max-width:720px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 20px}.rules summary{cursor:pointer;font-weight:700;color:#ffd76e}.rules ul{margin:12px 0 4px;padding-left:20px;line-height:1.9;font-size:14px;color:#c8cede}#screen-game{display:flex}#board-container{position:relative;flex:1;min-width:0}#board-canvas{display:block;touch-action:none}#inset-frame{position:absolute;left:14px;bottom:14px;width:clamp(120px,22vmin,210px);height:clamp(120px,22vmin,210px);border:1px solid rgba(255,255,255,.25);border-radius:10px;pointer-events:none;z-index:5}#inset-frame span{position:absolute;top:6px;left:8px;font-size:11px;color:#fff9}#view-buttons{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:5;max-width:70%}#view-buttons button{padding:6px 10px;font-size:12px;background:#1c2336d9}#view-buttons button:hover{background:#38456af2}#toast{position:absolute;top:60px;left:50%;transform:translate(-50%);background:#141826eb;border:1px solid #ffd76e;color:#ffd76e;padding:10px 20px;border-radius:10px;font-size:15px;z-index:10;max-width:80%;text-align:center;pointer-events:none}#panel{width:280px;flex-shrink:0;background:#0c0f19d9;border-left:1px solid rgba(255,255,255,.1);padding:20px 18px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.panel-title{font-size:22px;margin:0;letter-spacing:.1em;color:#ffd76e;text-align:center}#room-line{font-size:13px;color:#9aa6c0;text-align:center}#status-line{font-size:17px;font-weight:700;text-align:center;background:#ffffff0f;border-radius:10px;padding:12px 10px;min-height:1.4em}.count-box{display:flex;flex-direction:column;gap:8px;background:#ffffff0d;border-radius:10px;padding:12px 14px;font-size:16px}.count{display:flex;align-items:center;gap:8px}.stone-icon{display:inline-block;width:18px;height:18px;border-radius:50%}.stone-icon.black{background:radial-gradient(circle at 35% 30%,#555,#0a0a0a);border:1px solid #000}.stone-icon.white{background:radial-gradient(circle at 35% 30%,#fff,#cfcfc6);border:1px solid #999}#komi-label{color:#9aa6c0;font-size:13px}#undo-line{font-size:13px;color:#9aa6c0;text-align:center}.button-col{display:flex;flex-direction:column;gap:10px}#replay-controls{display:flex;flex-direction:column;gap:10px;background:#ffffff0d;border-radius:10px;padding:12px 14px}#rp-counter{text-align:center;font-size:16px;font-weight:700}.rp-buttons{display:flex;gap:6px}.rp-buttons button{flex:1;padding:8px 0;font-size:15px}.rp-hint{font-size:11px;color:#707b96;margin:0;text-align:center}.button-row+.button-row{margin-top:10px}#sound-row{display:flex;gap:8px}#sound-row button{flex:1;font-size:12px;padding:8px 6px}#sound-row button.off{opacity:.5}.hint{font-size:12px;color:#707b96;line-height:1.7;margin-top:auto}#overlay-result{position:fixed;top:0;right:0;bottom:0;left:0;background:#05070cb3;display:flex;align-items:center;justify-content:center;z-index:50}.result-card{background:#1a2032;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:34px 44px;text-align:center;max-width:420px;box-shadow:0 20px 60px #00000080}.result-card h2{margin:0 0 16px;font-size:30px;color:#ffd76e}#result-detail{font-size:16px;line-height:2;margin-bottom:8px}#result-undo{font-size:14px;color:#9aa6c0;margin-bottom:22px}.button-row{display:flex;gap:12px;justify-content:center}.share-label{margin-top:14px;font-size:12px;color:#707b96}.share-row{margin-top:6px}.share-row button{flex:1;font-size:13px;padding:9px 4px}#share-text{display:block;width:100%;margin:10px 0 0;background:#131826;border:1px solid #3a4663;border-radius:8px;color:#9aa6c0;font-size:11px;line-height:1.5;padding:7px 9px;resize:none;overflow-y:auto;text-align:left;white-space:pre-wrap;word-break:break-all}#btn-share-x{background:#0f1419;border-color:#3d4754}#btn-share-x:hover{background:#1f2732}#btn-share-misskey{background:#2e3a14;border-color:#86b300}#btn-share-misskey:hover{background:#3d4d1b}#btn-share-mastodon{background:#292b54;border-color:#6364ff}#btn-share-mastodon:hover{background:#343770}#overlay-welcome,#overlay-tutorial{position:fixed;top:0;right:0;bottom:0;left:0;background:#05070cb3;display:flex;align-items:center;justify-content:center;z-index:60}.welcome-card p{font-size:15px;line-height:1.9;color:#c8cede;margin:0 0 18px}.tut-card{position:relative;background:#1a2032;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:26px 32px 22px;width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:0 20px 60px #00000080}#btn-tut-close{position:absolute;top:12px;right:12px;padding:4px 10px;font-size:14px;background:transparent;border-color:#ffffff40;color:#9aa6c0}.tut-slide h3{margin:0 0 14px;font-size:21px;color:#ffd76e;text-align:center}.tut-img{display:block;margin:0 auto;width:min(300px,100%);height:auto}.tut-img.wide{width:min(620px,100%)}.tut-slide p{font-size:15px;line-height:1.9;color:#c8cede;margin:14px 0 0}.tut-slide strong{color:#ffd76e;font-weight:700}.tut-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.tut-nav>button{min-width:130px;flex-shrink:0}#tut-dots{display:flex;gap:9px}.tut-dot{width:12px;height:12px;padding:0;border-radius:50%;border:1px solid #6b7794;background:transparent}.tut-dot.on{background:#ffd76e;border-color:#ffd76e}@media (max-width: 700px){#screen-game{flex-direction:column}#panel{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;order:-1}.panel-title,.hint{display:none}}