:root{--bg-primary:#0f0f1a;--bg-secondary:#1a1a2e;--bg-tertiary:#16213e;--bg-board:#2a1810;--bg-board-inner:#1e120c;--point-dark:#8b4513;--point-light:#d4a76a;--point-dark-alt:#654321;--point-light-alt:#c9956b;--board-border:#3d2817;--bar-color:#3d2817;--checker-white:#e8dcc8;--checker-white-border:#c4b8a4;--checker-black:#2c2c2c;--checker-black-border:#1a1a1a;--text-primary:#e0e0e0;--text-secondary:#a0a0a0;--text-muted:#666;--accent:#7c6f5b;--accent-hover:#9a8b74;--accent-glow:#7c6f5b4d;--highlight:#4a9eff;--highlight-move:#4a9eff4d;--danger:#e74c3c;--success:#2ecc71;--dice-bg:#f5f0e8;--dice-dot:#1a1a1a;--dice-border:#c4b8a4;--header-height:48px;--border-radius:4px;--transition-fast:.15s ease;--transition-move:.2s ease;--font-main:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"SF Mono", "Fira Code", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);overflow:hidden}#app{flex-direction:column;height:100%;display:flex}.header{height:var(--header-height);background:var(--bg-secondary);z-index:10;border-bottom:1px solid #ffffff0f;flex-shrink:0;align-items:center;padding:0 16px;display:flex}.header-logo{letter-spacing:-.5px;color:var(--text-primary);font-size:18px;font-weight:700;text-decoration:none}.header-logo span{color:var(--accent)}.main-content{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}@media (width<=768px){.main-content{align-items:stretch}}.board-container{height:calc(100vh - var(--header-height));align-items:start;gap:12px;padding:8px 12px;display:flex;overflow:hidden}.board-and-jail{flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:0;height:100%;display:flex}.board-wrapper{justify-content:center;align-items:center;display:flex;position:relative}.board-svg{width:auto;height:calc(100vh - var(--header-height) - 80px);filter:drop-shadow(0 4px 24px #00000080);-webkit-user-select:none;user-select:none;max-width:100%;display:block}@media (width<=768px){.board-container{height:calc(100vh - var(--header-height));flex-direction:column;gap:0;padding:0;overflow:hidden}.board-and-jail{flex:1 1 0;width:100%;min-height:0;padding:2px 4px 0}.board-svg{width:100%;height:auto;max-height:calc(100vh - var(--header-height) - 200px);filter:drop-shadow(0 2px 12px #0006);margin:0 auto}.side-panel{min-height:0;overflow-y:auto;flex-direction:column!important;flex-shrink:0!important;gap:4px!important;width:100%!important;padding:4px 10px 6px!important}.side-panel .panel-section{padding:5px 10px}.side-panel .panel-title{display:none}.side-panel .turn-indicator{padding:4px 10px}.side-panel .panel-section:nth-child(3),.side-panel .panel-section:last-of-type{display:none}.move-list{max-height:60px!important}.controls.bottom-controls{justify-content:center;padding:2px 0}.landing{padding:24px 16px}.landing h1{font-size:32px!important}.landing .tagline{font-size:15px!important}.play-cards{flex-direction:column;align-items:center}.play-card{width:100%;max-width:280px}.friends-bar{max-width:100%}.game-over-modal{margin:16px;min-width:auto!important;padding:24px!important}}.checker{cursor:pointer;transition:filter var(--transition-fast)}.checker:hover{filter:brightness(1.15)}.checker.movable{filter:brightness(1.1);cursor:grab;touch-action:none}.checker.movable:hover{filter:brightness(1.25)}.checker.dragging{cursor:grabbing;filter:brightness(1.3)drop-shadow(0 4px 8px #0006)}.checker.selected{filter:brightness(1.3)}.jail-strip{background:#151520;border-radius:0 0 6px 6px;align-items:center;gap:8px;width:100%;max-width:100%;min-height:52px;padding:6px 12px;display:flex}.jail-label{letter-spacing:2px;color:#555;flex-shrink:0;font-size:10px;font-weight:700}.jail-cells{flex-wrap:wrap;gap:10px;display:flex}.jail-cell{border-radius:4px;justify-content:center;align-items:center;width:44px;height:44px;animation:.4s ease-out jail-slam;display:flex;position:relative;overflow:hidden}@keyframes jail-slam{0%{opacity:0;transform:scale(1.4)}40%{opacity:1;transform:scale(.92)}70%{transform:scale(1.04)}to{transform:scale(1)}}.jail-cell.jail-can-play{cursor:grab;touch-action:none;-webkit-touch-callout:none}.jail-cell.jail-selected{box-shadow:0 0 0 2px var(--highlight), 0 0 12px #4a9eff66;border-radius:6px}.jail-checker{z-index:1;border-radius:50%;flex-shrink:0;width:36px;height:36px}.jail-checker.white{background:var(--checker-white);border:2px solid var(--checker-white-border)}.jail-checker.black{background:var(--checker-black);border:2px solid var(--checker-black-border)}.jail-bars-overlay{z-index:2;pointer-events:none;justify-content:space-evenly;align-items:stretch;transition:transform .6s cubic-bezier(.1,0,.2,1),opacity .6s cubic-bezier(.1,0,.2,1);display:flex;position:absolute;inset:0}.jail-bar-thick{background:#7a7a7a;border-radius:1px;width:4px;box-shadow:1px 0 2px #0000004d}.jail-crossbar{z-index:3;pointer-events:none;background:#7a7a7a;border-radius:1px;height:4px;transition:transform .6s cubic-bezier(.1,0,.2,1),opacity .6s cubic-bezier(.1,0,.2,1);position:absolute;left:0;right:0}.jail-crossbar.top{top:0}.jail-crossbar.bottom{bottom:0}.jail-bars-overlay.bars-opening{animation:.8s cubic-bezier(.4,0,1,1) forwards bars-slide-open}.jail-crossbar.bars-opening{animation:.8s cubic-bezier(.4,0,1,1) forwards crossbar-open}@keyframes bars-slide-open{0%{opacity:1;transform:scaleX(1)}30%{opacity:.9;transform:scaleX(.95)}to{opacity:0;transform:scaleX(0)}}@keyframes crossbar-open{0%{opacity:1;transform:scaleY(1)}30%{opacity:.9;transform:scaleY(.9)}to{opacity:0;transform:scaleY(0)}}.drag-ghost{pointer-events:none;z-index:200;filter:drop-shadow(0 4px 12px #00000080);position:fixed;transform:translate(-50%,-50%)}.drag-ghost .jail-checker{opacity:.85;width:44px;height:44px}.move-dest{opacity:0;cursor:pointer}.move-dest.visible{opacity:1;cursor:pointer}.move-dest:hover{opacity:1}.point-area{cursor:default}.point-area.clickable{cursor:pointer}.dice-group{cursor:default}.die-used{opacity:.3}.side-panel{flex-direction:column;flex-shrink:0;gap:10px;width:220px;display:flex}.panel-section{background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid #ffffff0f;padding:12px}.panel-title{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:8px;font-size:11px}.turn-indicator{align-items:center;gap:8px;padding:10px 12px;display:flex}.turn-label{font-size:14px;font-weight:600}.ai-thinking-dots{align-items:center;gap:4px;display:flex}.ai-thinking-dots .dot{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite ai-pulse}.ai-thinking-dots .dot:nth-child(2){animation-delay:.2s}.ai-thinking-dots .dot:nth-child(3){animation-delay:.4s}@keyframes ai-pulse{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.controls{flex-wrap:wrap;gap:8px;display:flex}.bottom-controls{padding-top:4px}.btn{border-radius:var(--border-radius);font-family:var(--font-main);cursor:pointer;transition:all var(--transition-fast);background:var(--accent);color:var(--text-primary);border:none;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;display:inline-flex}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--highlight);color:#fff}.btn-primary:hover{background:#3a8aee}.btn-danger{background:var(--danger);color:#fff}.btn-small{padding:4px 10px;font-size:12px}.shortcut-hint{opacity:.5;font-size:10px;font-family:var(--font-mono);background:#ffffff1a;border-radius:2px;padding:1px 4px}.move-hint{color:var(--text-secondary);width:100%;font-size:12px}.double-offer{flex-direction:column;gap:8px;width:100%;display:flex}.double-msg{color:var(--accent);font-size:14px;font-weight:600}.move-list{font-family:var(--font-mono);max-height:200px;color:var(--text-secondary);font-size:12px;overflow-y:auto}.move-list::-webkit-scrollbar{width:4px}.move-list::-webkit-scrollbar-track{background:0 0}.move-list::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:2px}.move-entry{align-items:center;gap:6px;padding:2px 0;display:flex}.move-entry .ply{color:var(--text-muted);min-width:24px}.move-entry .dice-label{color:var(--accent)}.color-indicator{border-radius:50%;flex-shrink:0;width:8px;height:8px}.color-indicator.white{background:var(--checker-white)}.color-indicator.black{background:var(--checker-black);border:1px solid var(--text-muted)}.pip-display{justify-content:space-between;font-size:13px;display:flex}.pip-display .pip-value{font-weight:600;font-family:var(--font-mono)}.pip-inline{font-size:12px;font-family:var(--font-mono);color:var(--text-muted);margin-left:auto}.opponent-box{padding:10px 12px}.player-row{border-radius:4px;align-items:center;gap:8px;padding:4px 6px;transition:background .2s;display:flex}.player-row.active-turn{color:var(--text-primary);background:#4a9eff1a;font-weight:600}.player-row:not(.active-turn){color:var(--text-secondary)}.player-name{flex:1;font-size:13px}.player-row .color-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.player-row .color-dot.white{background:var(--checker-white)}.player-row .color-dot.black{background:var(--checker-black);border:1px solid var(--text-muted)}.vs-divider{text-align:center;color:var(--text-muted);letter-spacing:1px;padding:1px 0;font-size:10px}.cube-display{align-items:center;gap:8px;font-size:13px;display:flex}.cube-value{background:var(--bg-tertiary);border:1px solid var(--accent);font-weight:700;font-family:var(--font-mono);border-radius:3px;padding:2px 6px}.game-over-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.game-over-modal{background:var(--bg-secondary);text-align:center;border:1px solid #ffffff1a;border-radius:8px;min-width:300px;padding:32px}.game-over-modal h2{margin-bottom:8px;font-size:24px}.game-over-modal .result-type{color:var(--text-secondary);margin-bottom:16px;font-size:14px}.game-over-modal .points{color:var(--accent);margin-bottom:24px;font-size:36px;font-weight:700}.landing{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;height:100%;display:flex}.landing h1{letter-spacing:-1px;font-size:48px;font-weight:700}.landing h1 span{color:var(--accent)}.landing .tagline{color:var(--text-secondary);margin-top:-8px;font-size:18px}.play-cards{justify-content:center;gap:10px;margin-top:16px;display:flex}.play-card{background:var(--bg-secondary);cursor:pointer;text-align:center;min-width:120px;font-family:var(--font-main);color:var(--text-primary);border:1px solid #ffffff14;border-radius:6px;padding:16px 20px;transition:border-color .15s,background .15s}.play-card:hover{border-color:var(--highlight);background:var(--bg-tertiary)}.play-card.primary{background:var(--highlight);color:#fff;border-color:var(--highlight)}.play-card.primary:hover{background:#3a8aee}.play-card.small{min-width:80px;padding:8px 14px}.play-card-title{font-size:15px;font-weight:600}.play-card-desc{color:var(--text-muted);margin-top:3px;font-size:11px}.play-card.primary .play-card-desc{color:#ffffffb3}.friends-bar{background:var(--bg-secondary);border:1px solid #ffffff0f;border-radius:6px;flex-wrap:wrap;align-items:center;gap:12px;max-width:500px;margin-top:20px;padding:10px 16px;font-size:12px;display:flex}.friend-item{align-items:center;gap:5px;display:flex}.friend-name{color:var(--text-secondary)}.friend-challenge{border:none;background:var(--highlight)!important;color:#fff!important;padding:2px 6px!important;font-size:12px!important}.challenge-pending{animation:2s linear infinite challenge-snake;position:relative;color:#fff!important;background:#e53935 padding-box padding-box!important;border:2px solid #0000!important;padding:2px 6px!important;font-size:10px!important}@keyframes challenge-snake{0%{border-color:#e53935cc}50%{border-color:#e5393533}to{border-color:#e53935cc}}.challenge-timer-ring{justify-content:center;margin:8px 0;display:flex}.friend-accept{padding:2px 6px!important;font-size:10px!important}.friend-error{color:#e53935;font-size:10px}.friend-add{gap:4px;margin-left:auto;display:flex}.friend-add input{background:var(--bg-tertiary);width:100px;color:var(--text-primary);font-size:11px;font-family:var(--font-main);border:1px solid #ffffff1a;border-radius:3px;padding:4px 6px}.friend-add input::placeholder{color:var(--text-muted)}.header-auth{color:var(--text-primary);font-size:12px;text-decoration:none}.header-auth.muted{color:var(--text-muted);font-size:11px}.dev-link{color:var(--text-muted);font-size:11px;text-decoration:none}.landing-shortcuts{color:var(--text-muted);margin-top:8px;font-size:13px}.landing-shortcuts span{background:var(--bg-secondary);font-family:var(--font-mono);color:var(--text-secondary);border:1px solid #ffffff1a;border-radius:3px;padding:2px 6px;font-size:11px}.header-mode{color:var(--text-muted);background:#ffffff0f;border-radius:3px;margin-left:12px;padding:2px 8px;font-size:12px}.checker-anim{pointer-events:none;will-change:transform}@keyframes checker-leap{0%{transform:translate(var(--from-x), var(--from-y))}50%{transform:translate(var(--mid-x), calc(var(--mid-y) - 30px))}to{transform:translate(var(--to-x), var(--to-y))}}.dice-swap-btn{cursor:pointer;opacity:.5;transition:opacity .15s}.dice-swap-btn:hover{opacity:1}.die-rolling{animation:.5s ease-out die-tumble}@keyframes die-tumble{0%{opacity:.3;transform:rotate(0)scale(.6)}20%{opacity:1;transform:rotate(180deg)scale(1.1)}50%{transform:rotate(400deg)scale(.95)}75%{transform:rotate(680deg)scale(1.02)}to{transform:rotate(720deg)scale(1)}}.luck-meter{flex-direction:column;gap:6px;display:flex}.luck-current{align-items:center;gap:8px;font-size:12px;display:flex}.luck-bar-track{background:var(--bg-tertiary);border-radius:3px;flex:1;height:6px;position:relative;overflow:hidden}.luck-bar-fill{border-radius:3px;height:100%;transition:width .3s ease-out;position:absolute;top:0}.luck-bar-fill.positive{background:#4caf50;left:50%}.luck-bar-fill.negative{background:#e53935;right:50%}.luck-value{font-family:var(--font-mono);text-align:right;min-width:40px;font-size:11px;font-weight:600}.luck-value.positive{color:#4caf50}.luck-value.negative{color:#e53935}.luck-totals{color:var(--text-secondary);justify-content:space-between;font-size:11px;display:flex}.luck-totals .luck-player{align-items:center;gap:4px;display:flex}.luck-sparkline{width:100%;height:50px}.luck-sparkline polyline{fill:none;stroke-width:1.5px}.luck-line-white{stroke:var(--checker-white);opacity:.8}.luck-line-black{stroke:#666}.dice-heatmap{margin-top:4px}.heatmap-grid{grid-template-columns:18px repeat(6,1fr);gap:2px;display:grid}.heatmap-cell{aspect-ratio:1;color:#000000b3;border-radius:2px;justify-content:center;align-items:center;min-width:0;font-size:9px;display:flex}.heatmap-cell.actual{outline:2px solid var(--checker-white);outline-offset:-1px;color:#1a1a2e;font-size:10px}.heatmap-header{color:var(--text-muted);font-size:9px;background:0 0!important}.option-row{color:var(--text-secondary);cursor:pointer;align-items:center;gap:8px;padding:2px 0;font-size:12px;display:flex}.option-row input[type=checkbox]{accent-color:var(--highlight);cursor:pointer}.option-row .shortcut-hint{margin-left:auto}.option-row select{background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;border:1px solid #ffffff1a;border-radius:3px;margin-left:auto;padding:2px 6px;font-size:12px}.move-entry.active{border-left:2px solid var(--highlight);background:#4a9eff1f;padding-left:4px}.connection-indicator{color:var(--text-muted);z-index:50;align-items:center;gap:5px;font-size:10px;display:flex;position:fixed;bottom:8px;right:8px}.connection-dot{border-radius:50%;width:8px;height:8px;transition:background .3s}.connection-dot.connected{background:#4caf50;box-shadow:0 0 4px #4caf5080}.connection-dot.disconnected{background:#f0ad4e;animation:1.5s infinite pulse-warn;box-shadow:0 0 4px #f0ad4e80}@keyframes pulse-warn{0%,to{opacity:1}50%{opacity:.4}}.chat-panel{background:var(--bg-secondary);border-radius:var(--border-radius);width:180px;max-height:calc(100vh - var(--header-height) - 16px);border:1px solid #ffffff0f;flex-direction:column;flex-shrink:0;display:flex}.chat-header{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);padding:8px 10px 4px;font-size:11px}.chat-messages{flex:1;min-height:0;padding:4px 10px;font-size:12px;overflow-y:auto}.chat-messages::-webkit-scrollbar{width:3px}.chat-messages::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:2px}.chat-msg{word-break:break-word;padding:2px 0}.chat-time{color:var(--text-muted);margin-right:4px;font-size:9px}.chat-from{color:var(--text-secondary);margin-right:4px;font-weight:600}.chat-from:after{content:":"}.chat-text{color:var(--text-primary)}.chat-input{background:var(--bg-tertiary);color:var(--text-primary);font-size:12px;font-family:var(--font-main);border:none;border-top:1px solid #ffffff0f;outline:none;padding:8px 10px}.chat-input::placeholder{color:var(--text-muted)}.auth-page{max-width:320px;margin:60px auto;padding:24px}.auth-page h2{margin-bottom:16px}.auth-page input{background:var(--bg-secondary);border-radius:var(--border-radius);width:100%;color:var(--text-primary);font-size:14px;font-family:var(--font-main);box-sizing:border-box;border:1px solid #ffffff1a;margin-bottom:12px;padding:10px 12px;display:block}.auth-page input::placeholder{color:var(--text-muted)}.auth-page .auth-error{color:#e53935;margin-bottom:8px;font-size:12px}.auth-page .auth-link{color:var(--text-muted);margin-top:12px;font-size:12px}.auth-page .auth-link a{color:var(--highlight);text-decoration:none}.friends-section{max-width:300px;margin-top:16px}.friend-item{align-items:center;gap:8px;padding:6px 0;font-size:13px;display:flex}.friend-item .online-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.friend-item .online-dot.on{background:#4caf50}.friend-item .online-dot.off{background:#555}.friend-item .friend-name{flex:1}.profile-page{max-width:500px;margin:40px auto;padding:24px}.profile-page h2{margin-bottom:16px}.stat-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}.stat-card{background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid #ffffff0f;padding:12px}.stat-card .stat-value{font-size:24px;font-weight:700;font-family:var(--font-mono)}.stat-card .stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px}.game-history-table{border-collapse:collapse;width:100%;font-size:12px}.game-history-table th{text-align:left;color:var(--text-muted);text-transform:uppercase;border-bottom:1px solid #ffffff0f;padding:6px 8px;font-size:10px}.game-history-table td{border-bottom:1px solid #ffffff08;padding:6px 8px}@media (width<=768px){.chat-panel{display:none}}.opponent-arrows{opacity:1;transition:opacity .5s}.opponent-arrows.fading{opacity:0}