:root{--wood-dark: #3e2710;--wood-medium: #5c3a21;--wood-light: #d7a15c;--wood-board: #e9c28e;--wood-board-dark: #cc9c62;--ebony: #1f1d1d;--mahogany: #8b321a;--bg-dark: #12100e;--bg-light: #2b251f}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body{font-family:Outfit,Noto Sans JP,sans-serif;background:radial-gradient(circle at center,var(--bg-light) 0%,var(--bg-dark) 100%);color:#f5eedc;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}#root{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.wooden-board-bg{background-color:var(--wood-board);background-image:linear-gradient(to bottom,#ffffff1a,#00000026),url(/board_texture.png);background-size:cover;background-position:center;box-shadow:inset 0 0 45px #0006}.wooden-frame-bg{background-color:var(--wood-dark);background-image:repeating-linear-gradient(0deg,#321e0a33,#321e0a33 30px,#140a004d 31px,#140a004d 35px,#321e0a33 36px);border:4px solid #201005;box-shadow:0 15px 35px #0009,inset 0 2px 4px #ffffff1a}.wooden-wall-bg{background-color:var(--mahogany);background-image:linear-gradient(135deg,#ffffff26,#00000026);box-shadow:0 4px 6px #0006,inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #0006}.wood-btn{background:linear-gradient(to bottom,var(--wood-medium) 0%,var(--wood-dark) 100%);border:1px solid #1a0f05;border-radius:8px;color:#eedc82;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding:12px 24px;cursor:pointer;box-shadow:0 4px 8px #0000004d,inset 0 1px 2px #fff3;transition:all .2s ease}.wood-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0006,inset 0 1px 2px #ffffff4d;filter:brightness(1.1)}.wood-btn:active{transform:translateY(1px);box-shadow:0 2px 4px #0003,inset 0 1px 4px #0006}.player-tag{background:#0006;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);padding:10px 20px;border-radius:30px;font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:12px;box-shadow:0 4px 10px #0003}.player-tag.active{border-color:#eedc82;box-shadow:0 0 15px #eedc824d}::-webkit-scrollbar{display:none}.home-screen{justify-content:center;height:100vh;background-image:radial-gradient(circle,#0000001a,#0006)}.welcome-card{padding:40px;border-radius:16px;width:85vmin;max-width:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 20px 50px #000000b3,inset 0 2px 4px #ffffff26;animation:fadeIn .5s ease-out}.welcome-title{font-size:2.2rem;color:var(--wood-light);text-shadow:2px 3px 4px rgba(0,0,0,.8);margin:0 0 10px;font-weight:700;letter-spacing:2px}.welcome-subtitle{font-size:1rem;color:#d7a15c;text-shadow:1px 1px 2px rgba(0,0,0,.8);margin:0 0 40px;font-style:italic}.welcome-menu{display:flex;flex-direction:column;gap:20px;width:100%;max-width:280px}.menu-btn{font-size:1.2rem;padding:16px 24px;width:100%;border-radius:8px;font-weight:600;box-shadow:0 4px 8px #0006;transition:transform .2s,box-shadow .2s}.menu-btn:active{transform:scale(.98);box-shadow:0 2px 4px #0006}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.rules-screen{justify-content:center;height:100vh;overflow-y:auto}.rules-content{text-align:left;color:#f5f5f5;background:#0006;padding:20px;border-radius:8px;max-height:50vh;overflow-y:auto;font-size:.95rem;line-height:1.6;box-shadow:inset 0 2px 6px #00000080}.rules-content p{margin:0 0 12px}.rules-content ul{margin:0 0 12px;padding-left:20px}.rules-content li{margin-bottom:6px}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;height:100vh;padding:20px;touch-action:none}.player-panel{display:flex;justify-content:space-between;align-items:center;width:90vmin;max-width:600px;transition:all .3s ease}.player-panel.p2-panel{transform:rotate(180deg)}.player-panel.inactive{opacity:.3;filter:grayscale(40%) contrast(90%);pointer-events:none}.player-panel.active{opacity:1;filter:none}.walls-display{display:flex;gap:6px}.wall-icon{width:8px;height:24px;border-radius:2px;background:var(--mahogany);box-shadow:0 2px 4px #0000004d;transition:opacity .3s ease}.wall-icon.spent{opacity:.15;box-shadow:none}.pawn-mini{width:14px;height:14px;border-radius:50%}.p1-pawn-mini{background:radial-gradient(circle at 35% 35%,#fff 0%,var(--wood-light) 70%,var(--wood-dark) 100%);box-shadow:0 1px 3px #0006}.p2-pawn-mini{background:radial-gradient(circle at 35% 35%,#555 0%,var(--ebony) 70%,#000 100%);box-shadow:0 1px 3px #0006}.frame-outer{padding:12px;border-radius:12px;width:92vmin;height:92vmin;max-width:600px;max-height:600px;display:flex;justify-content:center;align-items:center}.board-inner{width:100%;height:100%;border-radius:6px;padding:8px}.grid-container{display:grid;grid-template-columns:1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;grid-template-rows:1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;width:100%;height:100%;gap:0}.tile{background:#5a381826;border:1.5px solid rgba(62,39,16,.45);border-radius:4px;box-shadow:inset 0 2px 3px #00000040;position:relative;display:flex;justify-content:center;align-items:center;cursor:default;transition:background-color .2s ease}.tile.candidate{cursor:pointer;background:#eedc8226}.tile.candidate:hover{background:#eedc824d}.candidate-dot{width:12px;height:12px;border-radius:50%;background:#eedc82;opacity:.6;box-shadow:0 0 8px #eedc82cc;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(.95);opacity:.5}50%{transform:scale(1.1);opacity:.8}to{transform:scale(.95);opacity:.5}}.pawn{width:75%;height:75%;border-radius:50%;position:absolute;z-index:10}.p1-pawn{background:radial-gradient(circle at 35% 35%,#ffffff 0%,var(--wood-light) 60%,var(--wood-dark) 100%);box-shadow:0 4px 6px #0006,inset -1px -1px 3px #0006}.p2-pawn{background:radial-gradient(circle at 35% 35%,#777777 0%,var(--ebony) 60%,#000000 100%);box-shadow:0 4px 6px #00000080,inset -1px -1px 3px #0009}.slot{transition:background-color .15s ease;cursor:pointer;position:relative}.h-slot{grid-column-end:span 1}.h-slot:before{content:"";position:absolute;top:-16px;bottom:-16px;left:0;right:0;z-index:1}.v-slot{grid-row-end:span 1}.v-slot:before{content:"";position:absolute;top:0;bottom:0;left:-16px;right:-16px;z-index:1}.mode-wall .slot:hover:not(.placed){background:#8b321a40}.mode-move .slot{pointer-events:none;cursor:default}.intersection{pointer-events:none}.slot.placed,.intersection.placed{background-color:var(--mahogany);background-image:linear-gradient(to bottom,#ffffff1a,#0003);box-shadow:0 2px 4px #0006;z-index:5}.h-slot.placed,.v-slot.placed{box-shadow:0 3px 4px #0000004d}.slot.preview,.intersection.preview{background-color:var(--mahogany);opacity:.6;animation:blink 1s infinite alternate;z-index:5}@keyframes blink{0%{opacity:.4}to{opacity:.8}}.control-bar{display:flex;gap:15px;margin-top:10px;height:48px;align-items:center}.confirm-btn{border-color:#7fbf7f;color:#7fbf7f}.win-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:100}.win-popup{padding:40px;border-radius:16px;text-align:center;max-width:400px;display:flex;flex-direction:column;gap:20px;align-items:center}.win-popup h2{color:#eedc82;font-size:2rem}.win-message{font-size:1.2rem;font-weight:600}.error-flash{background-color:#f33!important;opacity:.8!important;animation:flash-red .5s infinite alternate!important;z-index:6!important}@keyframes flash-red{0%{opacity:.3;background-color:#f33}to{opacity:.9;background-color:#a00}}.error-toast{background:linear-gradient(135deg,#4a1515,#2a0505);border:2px solid #8b0000;border-radius:8px;color:#f99;font-weight:600;padding:8px 16px;box-shadow:0 4px 10px #00000080;animation:slide-in .3s ease;font-size:.9rem;margin-bottom:5px;z-index:10}@keyframes slide-in{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.mode-selector{display:flex;background:#0000004d;border-radius:10px;padding:3px;border:1px solid rgba(255,255,255,.05)}.mode-btn{border:none;background:none;box-shadow:none;color:#ffffff80;font-size:.9rem;padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .2s ease}.mode-btn:hover{color:#fff;transform:none;box-shadow:none}.mode-btn.selected{background:linear-gradient(to bottom,var(--wood-light) 0%,var(--wood-board-dark) 100%);color:var(--wood-dark);font-weight:700;box-shadow:inset 0 1px 2px #ffffff4d,0 2px 4px #0000004d}.mode-btn.selected-wall{background:linear-gradient(to bottom,var(--mahogany) 0%,#5a1505 100%);color:#fff;font-weight:700;box-shadow:inset 0 1px 2px #ffffff4d,0 2px 4px #0000004d}.undo-btn:disabled{opacity:.25;pointer-events:none;transform:none;box-shadow:none}.mode-selector-mini{display:flex;background:#0000004d;border-radius:8px;padding:2px;border:1px solid rgba(255,255,255,.05)}.mode-btn-mini{border:none;background:none;box-shadow:none;color:#fff6;font-size:.85rem;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .2s ease}.mode-btn-mini:hover{color:#fff}.mode-btn-mini.selected{background:linear-gradient(to bottom,var(--wood-light) 0%,var(--wood-board-dark) 100%);color:var(--wood-dark);font-weight:700;box-shadow:inset 0 1px 2px #ffffff4d,0 2px 4px #0000004d}.mode-btn-mini.selected-wall{background:linear-gradient(to bottom,var(--mahogany) 0%,#5a1505 100%);color:#fff;font-weight:700;box-shadow:inset 0 1px 2px #ffffff4d,0 2px 4px #0000004d}