@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--cream: #F2EDE0;--cream-dark: #E8E1D0;--paper: #FFFCF5;--black: #111111;--white: #FFFFFF;--red: #E8251B;--red-dark: #C41E15;--red-light: #FF4038;--yellow: #FFD60A;--yellow-dark: #E6C000;--teal: #00B8A0;--blue: #2E5BFF;--green: #1DB954;--border: 2.5px solid var(--black);--border-thick: 3px solid var(--black);--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 3px 3px 0 var(--black);--shadow: 4px 4px 0 var(--black);--shadow-lg: 6px 6px 0 var(--black);--shadow-xl: 8px 8px 0 var(--black);--font-display: "Bebas Neue", "Arial Narrow", sans-serif;--font-body: "Outfit", "Segoe UI", sans-serif;--transition: .12s cubic-bezier(.2, 0, 0, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}.hidden,[hidden]{display:none!important}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-body);background:var(--cream);color:var(--black);min-height:100vh;overflow-x:hidden;line-height:1.5}body.landing-active{overflow:hidden}body.game-playing footer{display:none}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle,rgba(17,17,17,.07) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}.container{position:relative;z-index:1;width:100%;max-width:1520px;margin:0 auto;padding:8px 20px 48px}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:.04em;line-height:1.1}header{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:var(--border-thick);margin-bottom:28px;background:transparent}.header-brand{appearance:none;background:transparent;border:0;padding:0;display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none}.brand-mark{width:44px;height:44px;flex-shrink:0}.brand-mark-img{width:100%;height:100%;object-fit:contain}.brand-copy{display:flex;flex-direction:column;gap:0}.header-title{font-family:var(--font-display);font-size:2rem;letter-spacing:.1em;color:var(--black);line-height:1}.header-nav{display:flex;align-items:center;gap:10px}.nav-btn{background:var(--white);border:var(--border);color:var(--black);padding:8px 18px;font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:all var(--transition);display:flex;align-items:center;gap:6px}.nav-btn:hover{box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.nav-btn.primary{background:var(--red);color:var(--white);border-color:var(--black)}.nav-btn.primary:hover{background:var(--red-dark);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.notif-bell{position:relative;background:var(--white);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);font-size:1rem}.notif-bell:hover{box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.notif-bell-icon{font-size:1rem}.notif-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:var(--white);border:2px solid var(--black);border-radius:50%;min-width:20px;height:20px;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px}.profile-menu{position:relative}.profile-btn{display:flex;align-items:center;gap:8px;background:var(--white);border:var(--border);padding:6px 14px 6px 6px;border-radius:30px;cursor:pointer;transition:all var(--transition);color:var(--black);font-family:var(--font-body);font-size:.85rem;font-weight:600;box-shadow:var(--shadow-sm)}.profile-btn:hover{box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.profile-img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--black)}.profile-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:var(--white);border:var(--border-thick);border-radius:var(--radius-lg);min-width:240px;padding:16px;display:none;z-index:1000;box-shadow:var(--shadow-lg)}.profile-dropdown.show{display:block}.profile-stats{margin-bottom:14px;padding-bottom:14px;border-bottom:var(--border)}.profile-stats h3{font-family:var(--font-display);font-size:1.2rem;letter-spacing:.06em;margin-bottom:10px;color:var(--black)}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:.85rem}.stat-label{color:#555;font-weight:500}.stat-value{font-weight:700;color:var(--black)}.timer-row .timer-value{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.05em;color:var(--red)}.sign-out-btn{width:100%;background:var(--cream);border:var(--border);padding:8px;border-radius:var(--radius);font-family:var(--font-body);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black)}.sign-out-btn:hover{background:var(--red);color:var(--white);border-color:var(--black);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.game-layout{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}@media(min-width:900px){.game-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px}.game-layout .board-wrap{order:1}.game-layout .sidebar{order:2}}@media(min-width:1100px){.game-layout-playing{grid-template-columns:minmax(210px,240px) minmax(0,1fr) minmax(220px,260px);gap:clamp(18px,2.2vw,36px);align-items:center}.game-layout-playing .play-sidebar{order:1}.game-layout-playing .board-wrap{order:2}.game-layout-playing .sidebar{order:3}}.board-wrap{display:flex;align-items:center;justify-content:center;width:100%}.board-container{width:100%;max-width:720px;margin:0 auto;background:var(--paper);border:var(--border-thick);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:clamp(12px,1.6vw,20px)}#game-canvas{display:block;width:100%;height:auto;max-width:100%;margin:0 auto;border:var(--border);border-radius:calc(var(--radius-xl) - 6px);box-shadow:var(--shadow);background:#f5f0e4;cursor:pointer}.sidebar{display:flex;flex-direction:column;gap:14px;position:relative}.play-sidebar{display:flex;flex-direction:column}.play-sidebar-card{background:var(--white);border:var(--border-thick);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;height:100%}.play-sidebar-top{padding:20px 20px 0;flex:1}.play-sidebar-header{margin-bottom:18px}.play-sidebar-kicker{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#666;margin-bottom:2px}.play-sidebar-title{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.06em;color:var(--black)}.play-player-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.play-player-card{background:var(--cream);border:var(--border);border-radius:var(--radius-lg);padding:12px 14px;transition:all var(--transition);display:flex;align-items:center;justify-content:space-between;gap:12px}.play-player-card.active{background:var(--yellow);border-color:var(--black);box-shadow:var(--shadow-sm);transform:translate(-2px,-2px)}.play-player-meta{display:flex;align-items:center;gap:10px;min-width:0}.play-turn-indicator{width:10px;height:10px;border-radius:50%;background:#ccc;border:2px solid var(--black);flex-shrink:0;transition:background var(--transition)}.play-turn-indicator.active{background:var(--black)}.play-player-name{font-weight:700;font-size:.95rem;color:var(--black)}.play-player-sub{font-size:.75rem;color:#555;margin-top:1px}.play-player-clock{min-width:56px;padding:5px 8px;border:2px solid var(--black);border-radius:var(--radius);background:var(--white);font-family:var(--font-display);font-size:1rem;line-height:1;letter-spacing:.04em;text-align:center;box-shadow:2px 2px 0 var(--black)}.play-player-card.active .play-player-clock{background:var(--black);color:var(--white)}.play-sidebar-note{font-size:.78rem;color:#666;padding:10px 14px;background:var(--cream-dark);border-top:var(--border);border-radius:var(--radius);margin-bottom:16px}.play-sidebar-actions{display:flex;flex-direction:column;gap:8px;padding:16px 20px;border-top:var(--border);background:var(--cream)}.play-control-btn{background:var(--white);border:var(--border);border-radius:var(--radius);padding:10px 16px;font-family:var(--font-body);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black);width:100%}.play-control-btn:hover{box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.play-control-btn-danger{background:var(--red);color:var(--white);border-color:var(--black)}.play-control-btn-danger:hover{background:var(--red-dark)}.panel{background:var(--white);border:var(--border-thick);border-radius:var(--radius-xl);box-shadow:var(--shadow);overflow:hidden}.panel.active{display:block}.panel-header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:var(--border);background:var(--cream)}.panel-icon{font-size:1.3rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:var(--border);border-radius:var(--radius);background:var(--white);flex-shrink:0}.panel-icon.red{background:var(--red);color:var(--white)}.panel-icon.gold{background:var(--yellow);color:var(--black)}.panel-icon.teal{background:var(--teal);color:var(--white)}.panel-label{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.06em;color:var(--black);flex:1}.panel-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--yellow);color:var(--black);border:2px solid var(--black);border-radius:4px;padding:3px 8px;white-space:nowrap}.panel-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px}.phase-badge{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600}.phase-dot{width:8px;height:8px;border-radius:50%;background:var(--green);border:2px solid var(--black);animation:pulseDot 2s ease-in-out infinite}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.progress-bar{height:10px;background:var(--cream-dark);border:var(--border);border-radius:100px;overflow:hidden;margin-top:4px}.progress-fill{height:100%;transition:width .4s cubic-bezier(.4,0,.2,1);border-radius:100px}.progress-fill.red{background:var(--red)}.progress-fill.gold{background:var(--yellow)}.stats-panel-group{display:flex;flex-direction:column;gap:14px}.welcome-screen{background:var(--white);border:var(--border-thick);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:24px 22px}#logged-out-sidebar-welcome h2{font-family:var(--font-display);font-size:2rem;letter-spacing:.06em;color:var(--black);margin-bottom:8px;display:flex;flex-direction:column;gap:0;line-height:1}#logged-out-sidebar-welcome h2 span:first-child{font-size:.9rem;font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:#666}.welcome-divider{height:3px;background:var(--black);width:48px;margin:14px 0;border-radius:2px}#logged-out-sidebar-welcome p{font-size:.9rem;color:#555;line-height:1.6;margin-bottom:20px}.welcome-start-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--red);color:var(--white);border:var(--border-thick);border-radius:var(--radius);padding:14px 20px;font-family:var(--font-body);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);margin-bottom:10px}.welcome-start-btn:hover{background:var(--red-dark);box-shadow:1px 1px 0 var(--black);transform:translate(3px,3px)}.welcome-secondary-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--white);color:var(--black);border:var(--border);border-radius:var(--radius);padding:11px 20px;font-family:var(--font-body);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);margin-bottom:8px}.welcome-secondary-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.btn-icon{font-size:1rem}.lobby-panel-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:10px;border-bottom:var(--border)}.lobby-panel-icon{font-size:1.6rem}.lobby-panel-title{font-family:var(--font-display);font-size:1.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--black)}.lobby-menu{display:flex;flex-direction:column;gap:10px}.lobby-menu-item{display:flex;align-items:center;gap:14px;background:var(--paper);border:var(--border-thick);border-radius:var(--radius-xl);padding:12px 16px;cursor:pointer;transition:all var(--transition);text-align:left;box-shadow:var(--shadow);width:100%}.lobby-menu-item:hover{background:var(--yellow);box-shadow:2px 2px 0 var(--black);transform:translate(1px,1px)}.lobby-menu-icon{width:40px;height:40px;border-radius:var(--radius);border:var(--border-thick);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;background:var(--white)}.lobby-icon--blue{background:#d8e8ff}.lobby-icon--amber{background:#fff3d0}.lobby-icon--green{background:#d0ffec}.lobby-icon--gold{background:var(--yellow)}.lobby-icon--red{background:#ffd8d6}.lobby-menu-text{display:flex;flex-direction:column;gap:2px}.lobby-menu-title{font-weight:700;font-size:.95rem;color:var(--black)}.lobby-menu-sub{font-size:.74rem;color:#666}.sandbox-panel-body{gap:14px}.sandbox-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sandbox-tool-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--cream);border:var(--border);border-radius:var(--radius-lg);padding:12px 8px;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);position:relative}.sandbox-tool-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.sandbox-tool-btn.active{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px);border-width:2.5px}.sandbox-tool-icon{width:36px;height:36px;object-fit:contain}.sandbox-tool-name{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--black)}.sandbox-tool-count{position:absolute;top:-8px;right:-8px;background:var(--red);color:var(--white);border:2px solid var(--black);border-radius:50%;width:22px;height:22px;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}.sandbox-utility-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sandbox-utility-btn{background:var(--white);border:var(--border);border-radius:var(--radius);padding:8px;font-family:var(--font-body);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black)}.sandbox-utility-btn.active,.sandbox-utility-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(1px,1px)}.sandbox-help{font-size:.75rem;color:#666;line-height:1.5;background:var(--cream);border:1.5px solid var(--cream-dark);border-radius:var(--radius);padding:10px 12px}.sandbox-action-row{display:flex;flex-direction:column;gap:6px}.sandbox-clear-btn,.sandbox-exit-btn{margin-bottom:0;font-size:.78rem;padding:9px 16px}.action-panel-body{gap:10px}.action-panel-btn{width:100%;background:var(--white);border:var(--border);border-radius:var(--radius);padding:11px;font-family:var(--font-body);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black)}.action-panel-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.action-panel-btn-secondary{background:var(--cream)}.action-panel-btn-danger{background:var(--red);color:var(--white)}.action-panel-btn-danger:hover{background:var(--red-dark);box-shadow:1px 1px 0 var(--black)}.move-nav-container{display:flex;align-items:center;gap:10px;background:var(--white);border:var(--border);border-radius:var(--radius-lg);padding:10px 14px;box-shadow:var(--shadow-sm);justify-content:center}.move-nav-btn{background:var(--cream);border:var(--border);border-radius:var(--radius);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black)}.move-nav-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(1px,1px)}.move-counter{font-family:var(--font-display);font-size:1rem;letter-spacing:.08em;color:var(--black);min-width:60px;text-align:center}.mobile-play-actions{display:none;gap:8px;flex-direction:column}.play-player-piece-img,.play-player-vs,.play-player-stat,.mobile-action-btn{display:none}.winner-overlay{position:fixed;inset:0;background:#111111b3;display:none;align-items:center;justify-content:center;z-index:1100;padding:20px}.winner-overlay.show{display:flex}.winner-card{background:var(--white);border:var(--border-thick);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:32px 28px;max-width:480px;width:100%;position:relative;animation:cardPop .2s cubic-bezier(.2,0,0,1.4) both}@keyframes cardPop{0%{opacity:0;transform:scale(.88) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.player-select-close{position:absolute;top:14px;right:14px;background:var(--cream);border:var(--border);border-radius:var(--radius);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;font-weight:700;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black)}.player-select-close:hover{background:var(--red);color:var(--white);box-shadow:1px 1px 0 var(--black);transform:translate(1px,1px)}.select-title{font-family:var(--font-display);font-size:2rem;letter-spacing:.06em;color:var(--black);margin-bottom:20px;text-align:center}.mode-tabs{display:flex;gap:8px;margin-bottom:20px;background:var(--cream);border:var(--border);border-radius:var(--radius-lg);padding:4px}.mode-tab{flex:1;background:transparent;border:2px solid transparent;border-radius:var(--radius);padding:8px 12px;font-family:var(--font-body);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--transition);color:#666;position:relative}.mode-tab.active{background:var(--white);border-color:var(--black);color:var(--black);box-shadow:var(--shadow-sm)}.req-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:var(--white);border:2px solid var(--black);border-radius:50%;width:18px;height:18px;font-size:.65rem;font-weight:700;margin-left:4px}.difficulty-selection{margin-bottom:20px}.difficulty-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#666;margin-bottom:10px}.difficulty-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.difficulty-btn{background:var(--cream);border:var(--border);border-radius:var(--radius);padding:10px 8px;cursor:pointer;transition:all var(--transition);text-align:center;box-shadow:var(--shadow-sm)}.difficulty-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.difficulty-btn.active{background:var(--black);color:var(--white);box-shadow:none;transform:translate(3px,3px)}.difficulty-name{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.time-selection{margin-bottom:20px}.time-control-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.time-control-btn{background:var(--cream);border:var(--border);border-radius:var(--radius);padding:10px 6px;cursor:pointer;transition:all var(--transition);text-align:center;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:2px}.time-control-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.time-control-btn.active{background:var(--black);color:var(--white);box-shadow:none;transform:translate(3px,3px)}.time-control-name{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.time-control-meta{font-size:.7rem;color:#888;font-weight:500}.time-control-btn.active .time-control-meta{color:#fff9}.player-selection{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}.selection-card{background:var(--cream);border:var(--border-thick);border-radius:var(--radius-xl);padding:20px 12px;cursor:pointer;transition:all var(--transition);text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:10px}.selection-card:hover,.selection-card.selected{background:var(--yellow);box-shadow:2px 2px 0 var(--black);transform:translate(2px,2px)}.selection-logo{width:56px;height:56px;object-fit:contain}.selection-card h3{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.1em;color:var(--black)}.multiplayer-section{padding:8px 0}.tournament-coming-soon{text-align:center;padding:20px 8px}.coming-soon-title{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.06em;margin-bottom:10px;color:var(--black)}.coming-soon-text{font-size:.88rem;color:#555;margin-bottom:18px;line-height:1.6}.prize-info{display:flex;gap:8px;justify-content:center;margin-bottom:16px}.prize-card{background:var(--cream);border:var(--border);border-radius:var(--radius);padding:10px 14px;text-align:center;box-shadow:var(--shadow-sm);flex:1;max-width:100px}.prize-badge{display:block;font-family:var(--font-display);font-size:1.2rem;letter-spacing:.06em;color:var(--black)}.prize-amount{display:block;font-size:.7rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.05em}.prize-info .prize-card:first-child .prize-badge{color:var(--yellow-dark)}.tournament-alert{font-size:.8rem;font-weight:600;color:#888;background:var(--cream);border:1.5px dashed #ccc;border-radius:var(--radius);padding:8px 12px;display:inline-block}.signup-card{max-width:380px}.signup-form{display:flex;flex-direction:column;gap:12px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--black)}.form-group input{background:var(--cream);border:var(--border-thick);border-radius:var(--radius);padding:12px 14px;font-family:var(--font-body);font-size:.9rem;color:var(--black);transition:all var(--transition);outline:none;box-shadow:var(--shadow-sm)}.form-group input:focus{border-color:var(--black);box-shadow:var(--shadow);background:var(--white)}.signup-submit-btn{background:var(--black);color:var(--white);border:var(--border-thick);border-radius:var(--radius);padding:13px 20px;font-family:var(--font-body);font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);width:100%}.signup-submit-btn:hover{background:#333;box-shadow:1px 1px 0 var(--black);transform:translate(3px,3px)}.google-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--white);border:var(--border-thick);border-radius:var(--radius);padding:13px 20px;font-family:var(--font-body);font-size:.9rem;font-weight:700;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);color:var(--black)}.google-signin-btn:hover{background:var(--cream);box-shadow:1px 1px 0 var(--black);transform:translate(3px,3px)}.winner-result-card{text-align:center;padding:36px 32px 28px}.winner-result-card[data-winner=tiger]{border-top:6px solid var(--red)}.winner-result-card[data-winner=goat]{border-top:6px solid var(--yellow)}.winner-result-card[data-winner=draw]{border-top:6px solid #888}.winner-icon{margin-bottom:16px}.winner-logo{width:80px;height:80px;object-fit:contain;border:var(--border-thick);border-radius:50%;background:#ffe8e6;padding:8px;box-shadow:var(--shadow)}.winner-logo-single{width:80px;height:80px;object-fit:contain;border:var(--border-thick);border-radius:50%;background:var(--cream);padding:8px;box-shadow:var(--shadow)}.winner-result-copy{margin-bottom:24px}.winner-kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:6px}.winner-result-copy h2{font-family:var(--font-display);font-size:3rem;letter-spacing:.06em;color:var(--black);line-height:1;margin-bottom:8px}.winner-subtext{font-size:.85rem;color:#666;line-height:1.6;max-width:320px;margin:0 auto}.winner-actions{display:flex;gap:10px}.play-again-btn{flex:1;background:var(--red);color:var(--white);border:var(--border-thick);border-radius:var(--radius);padding:12px 20px;font-family:var(--font-body);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow)}.play-again-btn:hover{background:var(--red-dark);box-shadow:1px 1px 0 var(--black);transform:translate(3px,3px)}.exit-btn{flex:1;background:var(--white);color:var(--black);border:var(--border);border-radius:var(--radius);padding:12px 20px;font-family:var(--font-body);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm)}.exit-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}.friends-card{max-width:440px}.friends-tab-content{display:flex;flex-direction:column;gap:8px}.friends-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}.friends-empty{text-align:center;font-size:.85rem;color:#888;padding:24px;background:var(--cream);border:1.5px dashed #ccc;border-radius:var(--radius)}.friend-row{display:flex;align-items:center;gap:12px;background:var(--cream);border:var(--border);border-radius:var(--radius-lg);padding:10px 12px;box-shadow:var(--shadow-sm)}.friend-avatar{width:36px;height:36px;border-radius:50%;border:var(--border);background:var(--cream-dark);object-fit:cover;font-size:1.2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.friend-info{flex:1;min-width:0}.friend-name{font-size:.88rem;font-weight:700;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-sub{font-size:.72rem;color:#888}.friend-actions{display:flex;gap:6px}.fa-btn{background:var(--white);border:var(--border);border-radius:var(--radius);padding:6px 12px;font-family:var(--font-body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black)}.fa-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(1px,1px)}.fa-btn.accept{background:var(--green);color:var(--white);border-color:var(--black)}.fa-btn.decline,.fa-btn.challenge{background:var(--red);color:var(--white);border-color:var(--black)}.fa-btn.already{background:var(--cream-dark);color:#888;cursor:default}.friend-search-form{display:flex;gap:8px;margin-bottom:10px}.friend-search-form input{flex:1;background:var(--cream);border:var(--border-thick);border-radius:var(--radius);padding:10px 14px;font-family:var(--font-body);font-size:.88rem;outline:none;color:var(--black)}.friend-search-form input:focus{background:var(--white);box-shadow:var(--shadow-sm)}.search-results{display:flex;flex-direction:column;gap:6px}.room-btn{background:var(--black);color:var(--white);border:var(--border);border-radius:var(--radius);padding:10px 18px;font-family:var(--font-body);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);white-space:nowrap}.room-btn:hover{background:#333;box-shadow:1px 1px 0 var(--black);transform:translate(1px,1px)}.room-btn.create{background:var(--red)}.room-btn.join{background:var(--teal)}.notif-card{max-width:420px}.notif-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}.waiting-text{font-size:.9rem;color:#555}.challenge-label{margin:10px 0 6px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#666}.challenge-side-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.challenge-time-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.csp-btn{background:var(--cream);border:var(--border);border-radius:var(--radius);padding:8px 6px;font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black);display:flex;align-items:center;justify-content:center;gap:6px}.csp-btn:hover{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(1px,1px)}.csp-btn.active{background:var(--black);color:var(--white);box-shadow:none;transform:translate(2px,2px)}.waiting-spinner{width:32px;height:32px;border:3px solid var(--cream-dark);border-top-color:var(--black);border-radius:50%;animation:spin .8s linear infinite}.cancel-room-btn{width:100%;background:var(--cream);border:var(--border);border-radius:var(--radius);padding:11px;font-family:var(--font-body);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black)}.cancel-room-btn:hover{background:var(--red);color:var(--white);box-shadow:1px 1px 0 var(--black);transform:translate(2px,2px)}#coach-coming-soon-overlay .winner-card{text-align:center}.guest-mode-card{text-align:center;max-width:380px}.guest-mode-kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:6px}.guest-mode-title{font-family:var(--font-display);font-size:2rem;letter-spacing:.06em;margin-bottom:10px}.guest-mode-copy{font-size:.85rem;color:#666;margin-bottom:20px;line-height:1.6}.guest-mode-selection{gap:10px;margin-bottom:18px}.guest-mode-start-btn{max-width:200px;margin:0 auto}.guest-mode-start-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:var(--shadow)!important}.landing-screen{position:fixed;inset:0;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;padding:40px 20px;gap:0}.landing-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,transparent 55%,rgba(242,237,224,.7) 75%,var(--cream) 92%);z-index:1;pointer-events:none}.landing-screen:before{content:"";position:absolute;inset:0;background:url(/assets/Welcome-Hero-01.png) center top / cover no-repeat;opacity:.65;z-index:0}.landing-hero{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:40px}.landing-mark{width:88px;height:88px;background:var(--white);border:var(--border-thick);border-radius:50%;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;padding:12px}.landing-mark-img{width:100%;height:100%;object-fit:contain}.landing-title-block{text-align:center}.landing-title{font-family:var(--font-display);font-size:clamp(3.5rem,10vw,6rem);letter-spacing:.12em;color:var(--black);line-height:.9}.landing-tagline{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--red);margin-top:8px}.landing-actions{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px}.landing-action{display:flex;align-items:center;gap:12px;width:100%;background:var(--white);border:var(--border-thick);border-radius:var(--radius-lg);padding:14px 20px;font-family:var(--font-body);font-size:.9rem;font-weight:700;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);color:var(--black);text-align:left}.landing-action:hover{box-shadow:1px 1px 0 var(--black);transform:translate(3px,3px)}.landing-action-google{background:var(--black);color:var(--white);border-color:var(--black)}.landing-action-google:hover{background:#222}.landing-action-gold{background:var(--red);color:var(--white);border-color:var(--black)}.landing-action-gold:hover{background:var(--red-dark)}.landing-action-icon{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#ffffff2e;border-radius:6px;font-size:.85rem;font-weight:900}.landing-footer{position:relative;z-index:2;margin-top:20px}.landing-footer-link{background:transparent;border:0;color:#888;font-size:.75rem;cursor:pointer;text-decoration:underline;font-family:var(--font-body);transition:color var(--transition)}.landing-footer-link:hover{color:var(--black)}.auth-loading-screen{position:fixed;inset:0;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:9999;transition:opacity .35s ease}.auth-loading-screen.fade-out{opacity:0}.auth-loading-logo{width:72px;height:72px;object-fit:contain;animation:logoWobble 2s ease-in-out infinite}@keyframes logoWobble{0%,to{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.05)}}.auth-loading-dots{display:flex;gap:8px}.auth-loading-dots span{width:10px;height:10px;border-radius:50%;background:var(--black);border:2px solid var(--black);animation:dotBounce .7s ease-in-out infinite}.auth-loading-dots span:nth-child(2){animation-delay:.12s}.auth-loading-dots span:nth-child(3){animation-delay:.24s}@keyframes dotBounce{0%,to{transform:translateY(0);background:var(--black)}50%{transform:translateY(-8px);background:var(--red)}}.tutorial-overlay{position:fixed;inset:0;background:#111111bf;display:none;align-items:center;justify-content:center;z-index:1100;padding:20px}.tutorial-overlay.show{display:flex}.tutorial-content{background:var(--white);border:var(--border-thick);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:720px;max-height:90vh;position:relative;overflow:hidden;display:flex;flex-direction:column}.tutorial-close{position:absolute;top:14px;right:14px;z-index:10;background:var(--cream);border:var(--border);border-radius:var(--radius);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;font-weight:700;transition:all var(--transition);box-shadow:var(--shadow-sm);color:var(--black)}.tutorial-close:hover{background:var(--red);color:var(--white);box-shadow:1px 1px 0 var(--black);transform:translate(1px,1px)}.tutorial-scroll{overflow-y:auto;padding:40px 36px;flex:1}.tutorial-title{font-family:var(--font-display);font-size:3rem;letter-spacing:.08em;color:var(--black);margin-bottom:4px}.tutorial-subtitle{font-size:.85rem;color:#888;font-weight:500;margin-bottom:32px}.tutorial-section{margin-bottom:32px;padding-bottom:32px;border-bottom:var(--border)}.tutorial-section:last-of-type{border-bottom:0}.tutorial-section h2{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.06em;margin-bottom:14px;color:var(--black)}.tutorial-section.highlight{background:var(--cream);border:var(--border);border-radius:var(--radius-xl);padding:24px;margin-bottom:28px}.tutorial-section.highlight h2{margin-bottom:12px}.tutorial-section p{font-size:.9rem;line-height:1.7;color:#444;margin-bottom:12px}.tutorial-section p:last-child{margin-bottom:0}.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}.visual-card{background:var(--cream);border:var(--border);border-radius:var(--radius-lg);padding:16px;text-align:center;box-shadow:var(--shadow-sm)}.visual-icon{font-size:2rem;margin-bottom:6px}.visual-card h3{font-family:var(--font-display);font-size:1.2rem;letter-spacing:.06em;margin-bottom:4px}.visual-card p{font-size:.78rem;color:#666;margin-bottom:4px}.game-board-demo{margin-top:10px;width:100%;max-width:200px;margin-left:auto;margin-right:auto}.board-svg{width:100%;height:auto}.phase-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.demo-step{background:var(--cream);border:var(--border);border-radius:var(--radius-lg);padding:14px 10px;text-align:center;box-shadow:var(--shadow-sm)}.dice-step{display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);border:var(--border);border-radius:var(--radius);padding:4px 10px;font-size:.75rem;font-weight:700;margin-bottom:8px;box-shadow:var(--shadow-sm)}.demo-step h3{font-size:.82rem;font-weight:700;margin-bottom:4px}.demo-step p{font-size:.72rem;color:#666;line-height:1.4;margin-bottom:0}.movement-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}.move-card{background:var(--cream);border:var(--border);border-radius:var(--radius-lg);padding:14px 12px;text-align:center;box-shadow:var(--shadow-sm)}.move-card h3{font-size:.85rem;font-weight:700;margin-bottom:4px}.move-card p{font-size:.75rem;color:#666;line-height:1.4;margin-bottom:0}.win-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}.win-card{border:var(--border-thick);border-radius:var(--radius-lg);padding:20px 14px;text-align:center;box-shadow:var(--shadow)}.win-card.opposition{background:#ffe8e6}.win-card.candidates{background:var(--cream)}.win-icon{font-size:2rem;margin-bottom:8px}.win-card h3{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.06em;margin-bottom:6px}.win-counter{display:inline-block;background:var(--yellow);border:var(--border);border-radius:4px;padding:2px 10px;font-size:.8rem;font-weight:700;margin-bottom:8px;box-shadow:var(--shadow-sm)}.win-card p{font-size:.8rem;color:#666;margin-bottom:0}.tips-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px}.tip-item{background:var(--cream);border:var(--border);border-radius:var(--radius);padding:10px 14px;font-size:.85rem;line-height:1.5}.play-again-btn.tutorial-start{display:block;width:100%;max-width:280px;margin:0 auto;text-align:center}.philosophy-card{background:var(--cream);border:var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}.philosophy-card h3{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.05em;margin-bottom:6px}.philosophy-card p{font-size:.85rem;color:#555;line-height:1.6;margin-bottom:0}.lesson-box{background:var(--cream);border-left:4px solid var(--red);border-top:var(--border);border-right:var(--border);border-bottom:var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm)}.lesson-box h3{font-size:.85rem;font-weight:700;margin-bottom:4px}.lesson-box p{font-size:.82rem;color:#555;line-height:1.6;margin-bottom:0}footer{border-top:var(--border);padding:20px 0 0;margin-top:40px;text-align:center}.footer-text{font-size:.75rem;color:#aaa;font-weight:500;letter-spacing:.04em;text-transform:uppercase}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.pulse{animation:pulse 1.2s ease-in-out infinite}@media(max-width:900px){.container{padding:0 16px 40px}header{padding:14px 0;margin-bottom:20px}.header-title{font-size:1.5rem}.brand-mark{width:36px;height:36px}.game-layout{grid-template-columns:1fr}.play-sidebar{order:3!important}.board-wrap{order:1!important}.sidebar{order:2!important}#game-canvas{max-width:100%}.welcome-screen{padding:20px 18px}.phase-demo,.movement-grid,.visual-grid,.win-grid{grid-template-columns:1fr}.tutorial-scroll{padding:32px 20px}.tutorial-title{font-size:2.2rem}}@media(max-width:1024px){.game-layout{grid-template-columns:1fr;gap:0}.play-sidebar{order:1!important}.board-wrap{order:2!important}.sidebar{order:3!important}.game-layout-playing .sidebar{display:none}.header-title{font-family:var(--font-display);color:var(--red);letter-spacing:.06em;font-size:1.4rem}.nav-btn span:not(.btn-icon){display:none}.board-container{max-width:min(560px,calc(100vh - 220px))}.game-layout-playing{padding-bottom:76px}.mobile-play-actions:not(.hidden){display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--white);border-top:var(--border-thick);box-shadow:0 -3px 0 var(--black);padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));flex-direction:row;gap:8px;justify-content:stretch}.mobile-action-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--white);border:var(--border);border-radius:var(--radius);padding:10px 6px;font-family:var(--font-body);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:var(--black);box-shadow:var(--shadow-sm)}.mobile-action-btn-icon{font-size:1.2rem}.mobile-action-btn-danger{background:var(--red);color:var(--white);border-color:var(--black)}.play-sidebar .play-sidebar-header,.play-sidebar .play-sidebar-note,.play-sidebar .play-sidebar-actions{display:none!important}.play-sidebar-card{border-left:none;border-right:none;border-top:none;border-radius:0;box-shadow:none;background:var(--cream)}.play-sidebar-top{padding:10px 16px}.play-player-stack{flex-direction:row;gap:0;margin-bottom:0;align-items:center;justify-content:center}.play-player-card{flex:1;padding:8px 6px;border:none;border-radius:var(--radius);background:transparent;box-shadow:none}.play-player-card.active{background:#ffd60a73;box-shadow:none;transform:none;border-color:transparent}.play-player-meta{flex-direction:column;align-items:center;text-align:center;gap:3px}.play-turn-indicator{display:none}.play-player-piece-img{display:block;width:44px;height:44px;border-radius:50%;border:2.5px solid var(--black);box-shadow:2px 2px 0 var(--black);object-fit:cover}.play-player-name{font-size:.9rem}.play-player-sub{font-size:.72rem}.play-player-stat{display:block;font-size:.72rem;font-weight:700;color:#555;margin-top:2px}.play-player-vs{display:flex;font-family:var(--font-display);font-size:1.3rem;color:var(--black);opacity:.4;flex-shrink:0;padding:0 10px;align-self:center}}@media(max-width:600px){.container{padding:0 12px 32px}header{padding:12px 0;margin-bottom:14px}.header-title{font-size:1.2rem}.nav-btn{padding:8px 10px}.panel-header{padding:10px 14px}.panel-body{padding:12px 14px}.winner-card{padding:24px 18px}.select-title{font-size:1.6rem}.difficulty-buttons,.time-control-buttons{grid-template-columns:repeat(3,1fr);gap:6px}.player-selection{grid-template-columns:1fr 1fr;gap:10px}.winner-actions{flex-direction:column}.landing-title{font-size:3rem}.landing-mark{width:72px;height:72px}.mode-tabs{flex-wrap:wrap}.game-layout-playing{padding-bottom:70px}.play-sidebar-top{padding:8px 12px}.play-player-piece-img{width:36px;height:36px}.play-player-name{font-size:.78rem}.play-player-sub{font-size:.6rem}.play-player-stat{font-size:.65rem;margin-top:1px}.play-player-vs{font-size:1.1rem;padding:0 6px}.play-player-card{padding:6px 4px}.mobile-action-btn{font-size:.62rem;padding:7px 4px;gap:2px}.mobile-action-btn-icon{font-size:1rem}.mobile-play-actions:not(.hidden){padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));gap:6px}.tutorial-scroll{padding:24px 16px}.stats-panel-group{flex-direction:row;gap:10px}.stats-panel-group .panel{flex:1}.challenge-time-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.landing-actions{max-width:280px}.landing-action{padding:12px 16px;font-size:.85rem}.winner-result-copy h2{font-size:2.4rem}}.game-layout-playing .board-wrap{min-height:min(68vh,760px)}.game-layout-playing .board-container{width:min(100%,720px,calc(100vh - 154px))}.game-layout-playing .sidebar{gap:12px}.game-layout-playing .panel-header,.game-layout-playing .panel-body{padding:12px 14px}.game-layout-playing .stat-row{gap:14px}@media(min-width:1181px){.game-layout-playing .play-sidebar-card,.game-layout-playing .panel{max-width:260px}}@media(max-width:1180px){.container{max-width:none;padding:0 clamp(10px,2vw,18px) calc(74px + env(safe-area-inset-bottom))}.game-layout-playing{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.8vh,16px);align-content:start;min-height:calc(100vh - 116px);padding-bottom:76px}.game-layout-playing .play-sidebar,.game-layout-playing .board-wrap,.game-layout-playing .sidebar{order:initial!important}.game-layout-playing .play-sidebar{grid-row:1}.game-layout-playing .board-wrap{grid-row:2;min-height:0;align-self:start}.game-layout-playing .sidebar{display:none}.game-layout-playing .play-sidebar-card{border:var(--border-thick);border-radius:var(--radius-xl);box-shadow:var(--shadow);background:var(--paper);overflow:visible}.game-layout-playing .play-sidebar-top{padding:10px}.game-layout-playing .play-sidebar-header,.game-layout-playing .play-sidebar-note,.game-layout-playing .play-sidebar-actions{display:none!important}.game-layout-playing .play-player-stack{flex-direction:row;gap:8px;margin:0;align-items:stretch}.game-layout-playing .play-player-vs{display:none}.game-layout-playing .play-player-card{flex:1 1 0;min-width:0;padding:9px 10px;border:var(--border);border-radius:var(--radius);background:var(--white);box-shadow:none;transform:none}.game-layout-playing .play-player-card.active{background:var(--yellow);box-shadow:2px 2px 0 var(--black);transform:none}.game-layout-playing .play-player-meta{flex-direction:row;text-align:left;gap:8px}.game-layout-playing .play-player-piece-img{display:block;width:clamp(30px,5.2vw,42px);height:clamp(30px,5.2vw,42px);border-radius:50%;border:2px solid var(--black);object-fit:cover;flex-shrink:0}.game-layout-playing .play-turn-indicator{display:none}.game-layout-playing .play-player-name{font-size:clamp(.76rem,1.8vw,.95rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}.game-layout-playing .play-player-sub,.game-layout-playing .play-player-stat{font-size:clamp(.58rem,1.45vw,.72rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-layout-playing .play-player-clock{min-width:clamp(48px,9vw,62px);padding:5px 7px;font-size:clamp(.9rem,2.4vw,1.15rem)}.game-layout-playing .board-container{width:calc(100vh - 238px);max-width:calc(100vw - 32px);min-width:0}.mobile-play-actions:not(.hidden){display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--white);border-top:var(--border-thick);box-shadow:0 -3px 0 var(--black);padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));flex-direction:row;gap:8px;justify-content:stretch}}@media(max-width:760px){header{margin-bottom:12px}.game-layout-playing{min-height:calc(100vh - 96px);gap:10px}.game-layout-playing .play-sidebar-card{border-radius:var(--radius-lg)}.game-layout-playing .play-player-stack{gap:6px}.game-layout-playing .play-player-card{padding:7px;gap:6px}.game-layout-playing .play-player-meta{gap:6px}.game-layout-playing .play-player-sub{display:none}.game-layout-playing .board-container{width:calc(100vw - 24px);max-width:calc(100vh - 202px);padding:10px;border-radius:var(--radius-lg)}}.add{color:var(--green)}.danger{color:var(--red)}.board-wrap .board-container{display:flex;align-items:center;justify-content:center;width:100%}@media(max-width:1180px){.game-layout.game-layout-playing .board-wrap .board-container{width:calc(100vh - 238px);max-width:calc(100vw - 32px)}}@media(max-width:760px){.game-layout.game-layout-playing .board-wrap .board-container{width:calc(100vw - 24px);max-width:calc(100vh - 202px)}}#mp-player-tag,#mp-opponent-tag{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;background:var(--white);border:var(--border);border-radius:100px;padding:4px 10px;box-shadow:var(--shadow-sm);transition:all var(--transition)}#mp-player-tag.mp-tag-active,#mp-opponent-tag.mp-tag-active{background:var(--yellow);box-shadow:1px 1px 0 var(--black);transform:translate(1px,1px)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--cream)}::-webkit-scrollbar-thumb{background:#bbb;border-radius:100px}::-webkit-scrollbar-thumb:hover{background:#888}:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}