@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&family=Share+Tech+Mono&display=swap";:root{--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"Share Tech Mono", monospace;--transition-smooth:all .3s cubic-bezier(.25, .8, .25, 1);--cell-size:52px;--gap-size:8px;--board-size-computed:calc(9 * var(--cell-size) + 8 * var(--gap-size))}[data-theme=cyberpunk]{--bg-app:radial-gradient(circle at center, #0d0b21 0%, #05040e 100%);--bg-card:#100c26b3;--border-card:1px solid #00f2fe33;--shadow-card:0 10px 30px #00f2fe1a, 0 0 15px #fc00ff0d;--bg-board:#070514;--border-board:#00f2fe;--shadow-board:0 20px 50px #000c, 0 0 30px #00f2fe33;--bg-cell:#131032;--border-cell:#00f2fe1a;--bg-cell-hover:#00f2fe26;--bg-cell-valid:#00ff8826;--border-cell-valid:#0f8;--glow-cell-valid:0 0 12px #0f86;--color-p1:#00f2fe;--glow-p1:0 0 15px #00f2fe, inset 0 0 8px #fffc;--color-p2:#fc00ff;--glow-p2:0 0 15px #fc00ff, inset 0 0 8px #fffc;--bg-wall-slot:#ffffff05;--bg-wall-hover-p1:#00f2fe59;--bg-wall-hover-p2:#fc00ff59;--bg-wall-placed-p1:#00f2fe;--bg-wall-placed-p2:#fc00ff;--glow-wall-placed-p1:0 0 15px #00f2fe;--glow-wall-placed-p2:0 0 15px #fc00ff;--wall-shadow:#0009;--text-primary:#fff;--text-secondary:#a0aec0;--text-accent:#00f2fe}[data-theme=wood]{--bg-app:radial-gradient(circle at center, #2c1a0e 0%, #170d06 100%);--bg-card:#2b1a0fd9;--border-card:1px solid #d4a37340;--shadow-card:0 10px 25px #00000080;--bg-board:#3d2516;--border-board:#d4a373;--shadow-board:0 25px 40px #000000b3;--bg-cell:#50311c;--border-cell:#d4a37326;--bg-cell-hover:#d4a37333;--bg-cell-valid:#8bc34a33;--border-cell-valid:#8bc34a;--glow-cell-valid:0 0 8px #8bc34a4d;--color-p1:#f1c40f;--glow-p1:0 3px 8px #00000080;--color-p2:#e74c3c;--glow-p2:0 3px 8px #00000080;--bg-wall-slot:#00000040;--bg-wall-hover-p1:#f1c40f66;--bg-wall-hover-p2:#e74c3c66;--bg-wall-placed-p1:#e67e22;--bg-wall-placed-p2:#a04000;--glow-wall-placed-p1:0 2px 4px #00000080;--glow-wall-placed-p2:0 2px 4px #00000080;--wall-shadow:#000c;--text-primary:#f5f0eb;--text-secondary:#c9b3a3;--text-accent:#d4a373}[data-theme=glass]{--bg-app:linear-gradient(135deg, #1f1c2c 0%, #928dab 100%);--bg-card:#ffffff14;--border-card:1px solid #ffffff1f;--shadow-card:0 8px 32px 0 #0000004d;--bg-board:#ffffff0d;--border-board:#fff3;--shadow-board:0 30px 50px #0006, inset 0 0 20px #ffffff0d;--bg-cell:#ffffff08;--border-cell:#ffffff14;--bg-cell-hover:#ffffff1a;--bg-cell-valid:#00f2fe26;--border-cell-valid:#00f2fe;--glow-cell-valid:0 0 10px #00f2fe4d;--color-p1:#e0e0e0;--glow-p1:0 0 12px #ffffff80;--color-p2:#2b2b2b;--glow-p2:0 0 12px #0000004d;--bg-wall-slot:#ffffff05;--bg-wall-hover-p1:#ffffff4d;--bg-wall-hover-p2:#0000004d;--bg-wall-placed-p1:#ffffffd9;--bg-wall-placed-p2:#141414d9;--glow-wall-placed-p1:0 4px 12px #fff3;--glow-wall-placed-p2:0 4px 12px #0003;--wall-shadow:#0006;--text-primary:#fff;--text-secondary:#dcdcdc;--text-accent:#e0e0e0}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-app);color:var(--text-primary);justify-content:center;align-items:center;min-height:100vh;transition:background .5s;display:flex;overflow-x:hidden}#root{justify-content:center;width:100%;max-width:1200px;padding:20px;display:flex}.app-container{grid-template-columns:1fr 380px;align-items:start;gap:30px;width:100%;display:grid}@media (width<=1024px){.app-container{grid-template-columns:1fr;max-width:600px;margin:0 auto}}@media (width<=600px){:root{--gap-size:5px;--cell-size:calc((100vw - 160px) / 9)}#root{padding:10px}.game-title{font-size:1.8rem}.board-wrapper,.board-container{padding:10px}.board-container.is-3d{transform:rotateX(20deg)rotate(-10deg)scale(.9)}}.game-column{flex-direction:column;align-items:center;gap:20px;display:flex}.game-header{text-align:center;width:100%}.game-title{letter-spacing:2px;text-transform:uppercase;background:linear-gradient(90deg, var(--text-primary) 0%, var(--text-accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:5px;font-size:2.5rem;font-weight:900}.game-subtitle{font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase;letter-spacing:4px;font-size:.9rem}.board-wrapper{perspective:1200px;padding:20px}.board-container{background:var(--bg-board);border:1px solid var(--border-board);box-shadow:var(--shadow-board);transform-style:preserve-3d;touch-action:none;border-radius:12px;justify-content:center;align-items:center;padding:15px;transition:transform .6s cubic-bezier(.25,1,.5,1);display:flex}.board-container.is-3d{transform:rotateX(30deg)rotate(-15deg)scale(.85)}.board-grid{grid-template-columns:var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size);grid-template-rows:var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size) var(--gap-size) var(--cell-size);transform-style:preserve-3d;background:0 0;display:grid}.board-cell{background:var(--bg-cell);border:1px solid var(--border-cell);cursor:pointer;transition:var(--transition-smooth);transform-style:preserve-3d;border-radius:6px;justify-content:center;align-items:center;display:flex;position:relative}.board-cell:hover{background:var(--bg-cell-hover)}.board-cell.is-valid{background:var(--bg-cell-valid);border-color:var(--border-cell-valid);box-shadow:var(--glow-cell-valid)}.board-cell.is-valid:after{content:"";background:var(--border-cell-valid);border-radius:50%;width:10px;height:10px;animation:1.5s infinite alternate pulse-glow}.pawn{z-index:10;width:34px;height:34px;transform-style:preserve-3d;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;transition:transform .3s cubic-bezier(.25,.8,.25,1);display:flex;position:absolute}.pawn.p1{background:var(--color-p1);box-shadow:var(--glow-p1)}.pawn.p2{background:var(--color-p2);box-shadow:var(--glow-p2)}.board-container.is-3d .pawn{transform:translateZ(16px)}.board-container.is-3d .pawn:before{content:"";filter:blur(4px);pointer-events:none;width:34px;height:34px;transition:var(--transition-smooth);background:#0006;border-radius:50%;position:absolute;transform:translateZ(-16px)scale(.95)}.wall-sensor{cursor:pointer;z-index:5;background:0 0;position:relative}.wall-sensor.horizontal{grid-column:span 3}.wall-sensor.vertical{grid-row:span 3}.wall-element{pointer-events:none;width:100%;height:100%;transition:var(--transition-smooth);transform-style:preserve-3d;border-radius:4px;position:absolute;top:0;left:0}.wall-element.preview{opacity:0}.wall-element.placed.p1{--wall-color:var(--bg-wall-placed-p1);background:var(--wall-color);box-shadow:var(--glow-wall-placed-p1)}.wall-element.placed.p2{--wall-color:var(--bg-wall-placed-p2);background:var(--wall-color);box-shadow:var(--glow-wall-placed-p2)}.board-container.is-3d .wall-element.placed{transform:translateZ(24px);box-shadow:0 0 10px #00000080}.board-container.is-3d .wall-element.placed:before{content:"";background:var(--wall-color);transform-origin:bottom;filter:brightness(.65);width:100%;height:24px;position:absolute;bottom:0;left:0;transform:rotateX(90deg)}.board-container.is-3d .wall-element.placed:after{content:"";background:var(--wall-color);transform-origin:100%;filter:brightness(.35);width:24px;height:100%;position:absolute;top:0;right:0;transform:rotateY(-90deg)}.wall-sensor.is-touch-hover .wall-element.preview{opacity:1}.wall-sensor.current-p1.is-touch-hover .wall-element.preview{background:var(--bg-wall-hover-p1)}.wall-sensor.current-p2.is-touch-hover .wall-element.preview{background:var(--bg-wall-hover-p2)}@media (hover:hover){.wall-sensor:hover .wall-element.preview{opacity:1}.wall-sensor.current-p1:hover .wall-element.preview{background:var(--bg-wall-hover-p1)}.wall-sensor.current-p2:hover .wall-element.preview{background:var(--bg-wall-hover-p2)}}.sidebar{flex-direction:column;gap:20px;width:100%;display:flex}.card{background:var(--bg-card);border:var(--border-card);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(10px);transition:var(--transition-smooth);border-radius:12px;padding:20px}.player-status-card{flex-direction:column;gap:15px;display:flex}.player-row{transition:var(--transition-smooth);background:#ffffff05;border:1px solid #ffffff0a;border-radius:8px;justify-content:space-between;align-items:center;padding:12px;display:flex}.player-row.is-active{border-color:var(--text-accent);background:#ffffff0f;box-shadow:0 0 10px #00f2fe0d}.player-info{align-items:center;gap:12px;display:flex}.player-badge{border:1px solid #fff;border-radius:50%;width:16px;height:16px}.ai-avatar{object-fit:cover;border:2px solid var(--p2-color);border-radius:50%;width:24px;height:24px;box-shadow:0 0 10px #f8717166}.player-badge.p1{background:var(--color-p1);box-shadow:var(--glow-p1)}.player-badge.p2{background:var(--color-p2);box-shadow:var(--glow-p2)}.player-name{font-size:1.1rem;font-weight:700}.walls-left{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.walls-label{text-transform:uppercase;color:var(--text-secondary);font-size:.75rem;font-family:var(--font-mono)}.walls-pips{gap:3px;display:flex}.wall-pip{width:4px;height:14px;transition:var(--transition-smooth);background:#ffffff26;border-radius:1px}.player-row.p1-row .wall-pip.active{background:var(--color-p1)}.player-row.p2-row .wall-pip.active{background:var(--color-p2)}.controls-card{flex-direction:column;gap:15px;display:flex}.control-group{flex-direction:column;gap:8px;display:flex}.control-label{font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px;font-size:.8rem}.btn-row{gap:10px;width:100%;display:flex}.btn-row .btn{flex:1}.btn{color:var(--text-primary);cursor:pointer;transition:var(--transition-smooth);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:10px 14px;font-weight:600;display:flex}.btn:hover{background:#ffffff1f;border-color:#fff3}.btn.active{background:var(--text-accent);color:#000;border-color:var(--text-accent);font-weight:700}.btn-primary{background:var(--text-accent);color:#000;border-color:var(--text-accent);font-size:1rem;font-weight:700}.btn-primary:hover{color:#000;box-shadow:0 0 15px var(--text-accent);background:#fff;border-color:#fff}.log-card{flex-direction:column;height:200px;display:flex}.log-content{font-family:var(--font-mono);flex-direction:column;flex:1;gap:6px;padding-right:5px;font-size:.85rem;display:flex;overflow-y:auto}.log-entry{background:#00000026;border-radius:4px;justify-content:space-between;padding:4px 8px;display:flex}.log-entry.p1-move{border-left:2px solid var(--color-p1)}.log-entry.p2-move{border-left:2px solid var(--color-p2)}.log-number{color:var(--text-secondary)}.log-notation{font-weight:700}.log-notation.p1-text{color:var(--color-p1)}.log-notation.p2-text{color:var(--color-p2)}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.shake{animation:.4s shake}@keyframes pulse-glow{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100;background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-content{flex-direction:column;gap:15px;width:90%;max-width:500px;max-height:80vh;display:flex;position:relative;overflow-y:auto}.modal-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;position:absolute;top:15px;right:15px}.modal-close:hover{color:var(--text-primary)}.rules-list{flex-direction:column;gap:8px;padding-left:20px;display:flex}.winner-overlay{z-index:101;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100vw;height:100vh;animation:.5s ease-out fade-in;display:flex;position:fixed;top:0;left:0}.winner-banner{text-transform:uppercase;letter-spacing:4px;text-align:center;font-size:3rem;font-weight:900}.winner-banner.p1-wins{color:var(--color-p1);text-shadow:0 0 20px #00f2fe99}.winner-banner.p2-wins{color:var(--color-p2);text-shadow:0 0 20px #fc00ff99}@keyframes fade-in{0%{opacity:0}to{opacity:1}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}