:root{--skin-canvas-bg:#f5c76c;--skin-board-border:#6b4c16;--skin-board-grid:#000;--skin-stone-black-last-stroke:#666;--skin-stone-white-last-stroke:#999;--skin-order-on-black:#fff;--skin-order-on-white:#000;--skin-order-font:Arial;--skin-hex-indicator-white:#fff;--skin-hex-indicator-black:#1a1a1a;--skin-hex-outline:#6b4c16;--skin-hex-fill:#f0d9b5;--skin-stone-black-imgs:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><circle cx='0' cy='0' r='21.5' fill='%23000'/></svg>");--skin-stone-white-imgs:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><circle cx='0' cy='0' r='21.5' fill='%23fff' stroke='%23333' stroke-width='2'/></svg>");--skin-stone-black-lv2-imgs:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><circle cx='0' cy='0' r='23' fill='%23000'/><circle cx='0' cy='0' r='18' fill='none' stroke='%23f5c842' stroke-width='2'/></svg>");--skin-stone-white-lv2-imgs:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><circle cx='0' cy='0' r='23' fill='%23fff' stroke='%23333' stroke-width='2'/><circle cx='0' cy='0' r='18' fill='none' stroke='%236b5208' stroke-width='2'/></svg>");--skin-last-move-black-img:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><defs><radialGradient id='g' cx='50%' cy='50%' r='50%'><stop offset='40%' stop-color='%23007bff' stop-opacity='0.8'/><stop offset='100%' stop-color='%23007bff' stop-opacity='0'/></radialGradient></defs><circle cx='0' cy='0' r='35' fill='url(%23g)'/></svg>");--skin-last-move-white-img:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><defs><radialGradient id='g' cx='50%' cy='50%' r='50%'><stop offset='40%' stop-color='%23007bff' stop-opacity='0.8'/><stop offset='100%' stop-color='%23007bff' stop-opacity='0'/></radialGradient></defs><circle cx='0' cy='0' r='35' fill='url(%23g)'/></svg>");--ui-app-bg:#f4f4f9;--ui-surface:#fff;--ui-surface-2:#f0f0f0;--ui-border:#ddd;--ui-text:#333;--ui-text-muted:#888;--ui-accent:#007bff;--ui-accent-bg:#f0f7ff}body{background-color:var(--ui-app-bg);color:var(--ui-text);min-height:100dvh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#app{background:var(--ui-surface);text-align:center;width:100%;height:100dvh;position:relative;overflow:hidden}.global-layout{background-color:var(--ui-app-bg);justify-content:center;width:100vw;height:100dvh;display:flex;overflow:hidden}.full-screen-board{background:var(--ui-surface);box-sizing:border-box;flex-direction:column;width:100%;max-width:600px;height:100dvh;display:flex;position:relative}.ad-banner{color:#888;width:100%;height:50px;padding-top:env(safe-area-inset-top,0);box-sizing:content-box;background-color:#e0e0e0;flex:none;justify-content:center;align-items:center;margin:0;font-weight:700;display:flex}.ad-banner__logo{width:auto;max-width:92%;height:62%;display:block}.middle-content-area{box-sizing:border-box;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:15px;min-height:0;padding:10px 0;display:flex}#player-info-bar{background:var(--ui-surface-2);color:var(--ui-text);border:1px solid var(--ui-border);box-sizing:border-box;border-radius:12px;justify-content:space-between;align-items:center;width:calc(100% - 20px);max-width:600px;min-height:44px;padding:8px 12px;font-weight:700;display:flex}.player-slot{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.player-slot.white{justify-content:flex-end}.player-id{flex-direction:column;justify-content:center;min-width:0;height:28px;display:flex;overflow:hidden}.player-id .nick-line{text-overflow:ellipsis;white-space:nowrap;font-size:.9em;line-height:1.15;overflow:hidden}.player-id.two-line .nick-line{font-size:.78em;line-height:1.12}.player-slot.white .player-id{text-align:right}.stone-icon{border-radius:50%;flex-shrink:0;width:16px;height:16px;transition:transform .3s}.stone-icon.black{box-sizing:border-box;background-color:#000;border:1px solid #eee}.stone-icon.white{box-sizing:border-box;background-color:#fff;border:1px solid #333}.player-slot.active .stone-icon{z-index:1;transform:scale(1.6);box-shadow:0 0 10px #0000004d}.player-result-badge{color:#fff;border-radius:10px;margin:0 4px;padding:2px 6px;font-size:.7em;font-weight:700}.player-result-badge.win{background-color:#28a745}.player-result-badge.loss{background-color:#dc3545}.player-result-badge.draw{background-color:#6c757d}.game-result-overlay{color:#fff;text-align:center;z-index:10;pointer-events:none;background-color:#000c;border-radius:12px;padding:20px 40px;transition:background-color .3s,color .3s;animation:.3s ease-out popIn;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 24px #00000080}.game-result-overlay.light-theme{color:#222;background-color:#f0f0f0f2;box-shadow:0 8px 32px #0003}.game-result-overlay.light-theme .result-text[style*="color: rgb(204, 204, 204)"],.game-result-overlay.light-theme .result-text[style*="color: #ccc"]{color:#777!important}.game-result-overlay.light-theme .result-text[style*="color: rgb(255, 215, 0)"],.game-result-overlay.light-theme .result-text[style*="color: #ffd700"]{color:#c5a000!important}.game-result-overlay.fade-out{animation:.5s ease-in forwards fadeOutOverlay}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.8)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes fadeOutOverlay{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.1)}}.game-result-overlay .result-content{flex-direction:column;align-items:center;gap:10px;display:flex}.game-result-overlay .stone-icon.large{width:48px;height:48px}.game-result-overlay .result-nickname{font-size:1.2em;font-weight:700}.game-result-overlay .result-text{color:gold;font-size:2em;font-weight:900}.rule-name{margin:0 5px;font-size:.9em}.turn-timer-container{background-color:#eee;border-radius:2px;width:calc(100% - 20px);height:4px;margin-top:4px;overflow:hidden}.turn-timer-bar{background-color:#4caf50;width:100%;height:100%;transition:width .3s linear,background-color .3s}.turn-timer-bar.warning{background-color:#f44336}.info-slot{align-items:center;display:flex}.slot-like{justify-self:start;gap:4px}.slot-share{justify-self:end}.slot-game-ui{justify-content:center;justify-self:stretch;min-height:32px}#capture-info{align-items:center;gap:8px;min-width:240px;font-size:1em;font-weight:500;display:flex}#capture-info>span{text-align:center;flex:1}#capture-slots-white{flex-direction:row-reverse}.icon-passive-btn{cursor:pointer;color:var(--ui-text-muted);background:0 0;border:none;justify-content:center;align-items:center;padding:6px;transition:transform .2s,color .3s;display:flex}.icon-passive-btn:hover{color:var(--ui-text);transform:scale(1.1)}.icon-passive-btn:active{transform:scale(.9)}.icon-passive-btn svg{fill:currentColor;width:22px;height:22px}.is-hidden{visibility:hidden}.capture-slots{gap:4px;display:flex}.capture-slot{box-sizing:border-box;border:1px dashed #bbb;border-radius:50%;width:14px;height:14px}.capture-slot.filled.black{background:#000;border:1px solid #eee}.capture-slot.filled.white{background:#fff;border:1px solid #333}.like-btn{cursor:pointer;color:var(--ui-text-muted);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),color .3s;display:flex}.like-btn:hover{transform:scale(1.1)}.like-btn:active{transform:scale(.9)}.like-btn.liked{color:#ff4757}.like-btn.liked svg path{fill:#ff4757}.like-btn.liked{animation:.4s ease-out like-pulse}@keyframes like-pulse{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}#like-count{min-width:1em;font-weight:700}.win-leave{border:2px solid #388e3c;animation:1.5s infinite pulse;color:#fff!important;background-color:#4caf50!important}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.toast-notification{color:#fff;z-index:1000;pointer-events:none;background:#000c;border-radius:20px;padding:10px 20px;font-size:.9em;animation:.3s ease-out slideUp;position:fixed;bottom:100px;left:50%;transform:translate(-50%)}.toast-notification.fade-out{opacity:0;transition:opacity .5s}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.board-container{box-sizing:border-box;z-index:0;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;padding:12px 10px;display:flex;overflow:hidden}.ad-banner,#player-info-bar,.turn-timer-container,#rule-ui-container,.bottom-layout-container{z-index:1;position:relative}canvas{background-color:var(--skin-canvas-bg,#f5c76c);cursor:pointer;aspect-ratio:1;box-sizing:border-box;object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;transition:transform .3s;box-shadow:0 4px 12px #0003}.full-screen-board:not(.spectating) canvas{-webkit-tap-highlight-color:transparent}.full-screen-board.spectating canvas{cursor:grab}.full-screen-board.spectating canvas:active{cursor:grabbing}canvas.my-turn{animation:2s infinite board-pulse-my}@keyframes board-pulse-my{0%,to{box-shadow:0 0 10px 2px #007bff66}50%{box-shadow:0 0 20px 6px #007bff99}}.live-dot{background-color:#ccc;border-radius:50%;width:10px;height:10px}.live-dot.active{background-color:red;animation:2s infinite pulse}.bottom-layout-container{box-sizing:border-box;background:var(--ui-surface);border-top:1px solid var(--ui-border);width:100%;padding:10px 15px;padding-bottom:env(safe-area-inset-bottom,10px);flex-direction:column;flex:none;align-items:center;gap:8px;display:flex}.bottom-row-replay{justify-content:center;width:100%;display:flex}.bottom-row-action{justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}#rule-ui-container{width:100%;min-height:32px;color:var(--ui-text-muted);flex:none;justify-content:center;align-items:center;margin:5px 0;font-size:.85em;display:flex}.slot-group-action,.slot-group-replay,.slot-group-extra,.slot-group-settings{flex:none;align-items:center;gap:8px;display:flex}.slot-group-replay{justify-content:center;gap:10px}.action-btn{cursor:pointer;white-space:nowrap;border:none;border-radius:20px;padding:8px 12px;font-size:.88em;font-weight:700;box-shadow:0 2px 6px #00000014}.primary-btn{background:var(--ui-accent);color:#fff}.secondary-btn{background:var(--ui-surface-2);color:var(--ui-text);border:1px solid var(--ui-border)}.danger-btn{color:#fff;background:#dc3545}#settings-container{position:relative}.hamburger-btn{color:var(--ui-text);cursor:pointer;background:0 0;border:none;padding:5px}.dropdown-menu{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);z-index:1001;text-align:left;border-radius:8px;min-width:200px;padding:15px;display:none;position:absolute;bottom:56px;right:0;box-shadow:0 4px 12px #00000026}.dropdown-menu.show{display:block}.dropdown-item{flex-direction:column;gap:8px;margin-bottom:15px;display:flex}.dropdown-item label{color:var(--ui-text-muted);text-transform:uppercase;font-size:.85em;font-weight:700}.dropdown-item.row{border-top:1px solid var(--ui-border);flex-direction:row;justify-content:space-between;align-items:center;padding-top:12px}.lang-switch{gap:5px;display:flex}.lang-switch button{background:var(--ui-surface-2);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:4px;flex:1;padding:6px;font-size:.8em}.lang-switch button:hover{filter:brightness(.95)}#account-info{color:var(--ui-text)}#account-selection{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:4px;margin-top:5px}.switch{width:40px;height:22px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#ccc;border-radius:22px;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:16px;height:16px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--ui-accent)}input:checked+.slider:before{transform:translate(18px)}.skin-trigger{background:var(--ui-surface-2);cursor:pointer;border:1px solid var(--ui-border);border-radius:4px;align-items:center;gap:8px;padding:6px 8px;transition:background-color .15s;display:flex}.skin-trigger:hover{filter:brightness(.95)}.skin-trigger img{border-radius:4px;width:32px;height:32px;display:block}#skin-trigger-name{color:var(--ui-text);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.85em;font-weight:700;overflow:hidden}.skin-trigger-arrow{color:var(--ui-text-muted);font-size:1.2em;line-height:1}.skin-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;max-height:55vh;margin:15px 0;padding:4px;display:grid;overflow-y:auto}.skin-grid-card{cursor:pointer;border:2px solid var(--ui-border);background:var(--ui-surface);text-align:center;-webkit-user-select:none;user-select:none;border-radius:12px;padding:6px;transition:all .2s}.skin-grid-card:hover{filter:brightness(.97);transform:translateY(-2px)}.skin-grid-card.selected{border-color:var(--ui-accent);background-color:var(--ui-accent-bg);position:relative}.skin-grid-card.selected:after{content:"✓";background:var(--ui-accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;font-weight:700;display:flex;position:absolute;top:-8px;right:-8px}.skin-grid-card img{aspect-ratio:1;object-fit:cover;border-radius:8px;width:100%;display:block}.skin-grid-card-label{color:var(--ui-text-muted);white-space:nowrap;text-overflow:ellipsis;margin-top:6px;font-size:.85em;font-weight:700;overflow:hidden}.skin-grid-card.selected .skin-grid-card-label{color:var(--ui-accent)}#btn-close-settings{color:#fff;background-color:#6c757d;margin-top:10px}#btn-close-settings:hover{background-color:#5a6268}.bottom-sheet{background:var(--ui-surface);color:var(--ui-text);z-index:2000;visibility:hidden;border-radius:20px 20px 0 0;padding:20px;transition:transform .3s cubic-bezier(.2,.8,.2,1);position:absolute;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -5px 20px #0000001a}.bottom-sheet.show{visibility:visible;transform:translateY(0)}.ruleset-container{flex-wrap:wrap;justify-content:center;gap:10px;margin:15px 0;display:flex}.ruleset-card{border:2px solid var(--ui-border);cursor:pointer;background:var(--ui-surface);-webkit-user-select:none;user-select:none;border-radius:12px;flex-direction:column;align-items:center;width:85px;padding:10px 5px;transition:all .2s;display:flex}.ruleset-card:hover{filter:brightness(.97);transform:translateY(-2px)}.ruleset-card.selected{border-color:var(--ui-accent);background-color:var(--ui-accent-bg);position:relative}.ruleset-card.selected:after{content:"✓";background:var(--ui-accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;font-weight:700;display:flex;position:absolute;top:-8px;right:-8px}.ruleset-img{object-fit:contain;width:40px;height:40px;margin-bottom:8px}.ruleset-label{color:var(--ui-text-muted);font-size:.85em;font-weight:700}.ruleset-card.selected .ruleset-label{color:var(--ui-accent)}.sheet-actions{box-sizing:border-box;gap:12px;width:100%;margin-top:20px;display:flex}.sheet-actions button{flex:1;padding:12px;font-size:1em}.matchmaking-overlay,.rotation-overlay{color:#fff;z-index:5000;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.rotation-overlay{display:none}@media (orientation:landscape) and (width<=800px){.rotation-overlay{display:flex}.global-layout{display:none}}@media (width>=801px){.ad-banner{order:10;height:90px}}@media (width<=400px){.bottom-layout-container{gap:6px;padding:6px 8px}.slot-group-replay{gap:6px}.icon-btn{width:32px;height:32px}.action-btn{padding:7px 10px;font-size:.82em}}.slide-transition{transition:transform .4s cubic-bezier(.2,.8,.2,1)}.slide-up-out{transform:translateY(-100vh)!important}.slide-down-out,.slide-up-in{transform:translateY(100vh)!important}.slide-down-in{transform:translateY(-100vh)!important}.icon-btn{background:var(--ui-surface);border:1px solid var(--ui-border);cursor:pointer;width:36px;height:36px;color:var(--ui-text);border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-btn svg{fill:currentColor;width:18px;height:18px}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.hold-to-leave-wrapper{z-index:1;-webkit-user-select:none;user-select:none;touch-action:none;background-color:#0000;border-radius:24px;padding:4px;display:inline-block;position:relative;overflow:hidden}.hold-progress-ring{z-index:-1;border-radius:inherit;background-color:#dc354580;width:0%;height:100%;position:absolute;top:0;left:0}.hold-to-leave-inner{width:100%;height:100%;display:block;margin:0!important}