:root,:root.dark{--font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--bg-page:#121214;--text-primary:#e5e5e7;--text-secondary:#a1a1aa;--panel-bg:#1c1c1f;--panel-border:#28282b;--btn-bg:#242427;--btn-hover:#2c2c30;--btn-border:#3c3c40;--accent-color:#c89f50;--accent-hover:#b58c40;--shadow-color:#00000073;--header-bg:#101012;--warning:#cf5e53;--warning-hover:#b84e44;--success:#5e8b6b;--success-hover:#4d7557}:root.light{--bg-page:#f4f3ef;--text-primary:#2b2927;--text-secondary:#6c6863;--panel-bg:#fff;--panel-border:#dcdad0;--btn-bg:#eae7df;--btn-hover:#dedad0;--btn-border:#d2cebf;--accent-color:#b58c40;--accent-hover:#9c752f;--shadow-color:#2b292714;--header-bg:#e4e1d7;--warning:#b84e44;--warning-hover:#9c3f35;--success:#4d7557;--success-hover:#3d5e45}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--bg-page);color:var(--text-primary);-webkit-font-smoothing:antialiased;width:100vw;height:100vh;transition:background-color .2s,color .2s;overflow:hidden}.app-shell{background:var(--bg-page);flex-direction:column;width:100%;height:100vh;display:flex;overflow:hidden}.app-header{background:var(--header-bg);z-index:100;border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;height:44px;padding:0 16px;display:flex}.header-title-area{align-items:center;gap:10px;display:flex}.meeple-logo{background:var(--accent-color);color:#101012;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:.75rem;font-weight:800;display:inline-flex;box-shadow:0 1px 2px #0003}.header-titles{align-items:baseline;gap:8px;display:flex}.app-header h1{letter-spacing:.15em;color:var(--text-primary);margin:0;font-size:.95rem;font-weight:700}.header-subtitle{letter-spacing:.05em;color:var(--text-secondary);font-size:.7rem;font-weight:600}.header-actions{align-items:center;gap:12px;display:flex}.header-meta{color:var(--text-secondary);font-size:.75rem;font-weight:500}@media (width<=600px){.header-meta{display:none}}.header-menu-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:2px;justify-content:center;align-items:center;width:30px;height:30px;font-size:1rem;transition:background-color .1s;display:flex}.header-menu-btn:hover{background:var(--btn-hover)}.app-main{flex-direction:row;flex:1;gap:16px;width:100%;max-width:1600px;min-height:0;margin:0 auto;padding:16px;display:flex;overflow:hidden}.board-container{flex:1.5;justify-content:center;align-items:center;height:100%;display:flex}.game-board-wrapper{-webkit-user-select:none;user-select:none;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:2px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.game-canvas{cursor:pointer;touch-action:none;max-width:100%;max-height:100%;display:block}.sidebar-container{flex-direction:column;flex-shrink:0;width:320px;height:100%;display:flex}.stats-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:2px;flex-direction:column;gap:12px;width:100%;height:100%;padding:14px;display:flex;overflow-y:auto}.status-section{flex-direction:column;display:flex}.player-identity-row{align-items:center;gap:8px;display:flex}.player-dot{border:1px solid #00000026;border-radius:50%;width:10px;height:10px}.player-name{font-size:.85rem;font-weight:600}.thinking-pill{color:var(--accent-color);align-self:flex-start;padding:1px 0;font-size:.7rem;font-weight:600;animation:1.5s ease-in-out infinite pulse;display:inline-flex}.winner-announcement{text-align:center;border-radius:2px;margin-bottom:4px;padding:12px}.winner-announcement h3{margin-bottom:4px;font-size:1.15rem;font-weight:700}.winner-announcement p{font-size:.8rem;font-weight:600}.scoreboard-section h4{text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:8px;font-size:.7rem;font-weight:700}.player-card{background:var(--btn-bg);border:1px solid var(--panel-border);border-radius:2px;flex-direction:column;gap:6px;margin-bottom:6px;padding:8px 10px;transition:border-color .1s,background-color .1s;display:flex}.player-card.active-turn{border-color:var(--accent-color);background:#c89f5005}.player-card-header{justify-content:space-between;align-items:center;display:flex}.score-display{color:var(--text-secondary);font-size:.8rem;font-weight:600}.score-display strong{color:var(--text-primary);font-size:.85rem}.progress-bar-container{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-bar-fill{border-radius:2px;height:100%;transition:width .3s}.telemetry-section{border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);grid-template-columns:repeat(2,1fr);gap:8px;padding:10px 0;display:grid}.telemetry-item{flex-direction:column;display:flex}.telemetry-item .label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.65rem;font-weight:600}.telemetry-item .value{color:var(--text-primary);font-size:.85rem;font-weight:600}.dev-highlight{background:#c89f500a;border:1px solid #c89f5026;border-radius:2px;grid-column:span 2;padding:4px 8px}.dev-highlight .value{color:var(--accent-color)}.controls-section{flex-direction:column;gap:8px;margin-top:auto;display:flex}.action-buttons-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.control-btn{background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-primary);cursor:pointer;border-radius:2px;justify-content:center;align-items:center;padding:6px 12px;font-size:.8rem;font-weight:600;transition:all .1s;display:inline-flex}.control-btn:hover:not(:disabled){background:var(--btn-hover);border-color:var(--panel-border)}.control-btn:disabled{opacity:.3;cursor:not-allowed}.control-btn.primary,.primary-action-btn{background:var(--accent-color);border-color:var(--accent-hover);color:#101012!important}.control-btn.primary:hover:not(:disabled),.primary-action-btn:hover{background:var(--accent-hover)}.control-btn.primary:active:not(:disabled),.primary-action-btn:active{opacity:.9}.save-dialog{background:var(--btn-bg);border:1px solid var(--panel-border);border-radius:2px;flex-direction:column;gap:6px;margin-top:4px;padding:8px;display:flex}.save-dialog h5{font-size:.8rem;font-weight:600}.glass-input{background:var(--panel-bg);border:1px solid var(--btn-border);color:var(--text-primary);border-radius:2px;outline:none;padding:6px 8px;font-family:inherit;font-size:.8rem}.glass-input:focus{border-color:var(--accent-color)}.dialog-actions{justify-content:flex-end;gap:6px;display:flex}.dialog-btn{cursor:pointer;border:1px solid var(--btn-border);border-radius:2px;padding:4px 10px;font-size:.75rem;font-weight:600}.dialog-btn.cancel{background:var(--btn-bg);color:var(--text-secondary)}.dialog-btn.confirm{background:var(--accent-color);color:#101012;border-color:var(--accent-hover)}.menu-overlay{z-index:1000;background:#000000bf;justify-content:center;align-items:center;width:100vw;height:100vh;padding:16px;display:flex;position:fixed;top:0;left:0}.menu-container{background:var(--panel-bg);border:1px solid var(--panel-border);width:100%;max-width:400px;max-height:80vh;box-shadow:0 4px 16px var(--shadow-color);border-radius:2px;flex-direction:column;display:flex;overflow:hidden}.menu-header{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.menu-header h2{text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;font-weight:700}.close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1.2rem}.close-btn:hover{color:var(--text-primary)}.menu-nav{border-bottom:1px solid var(--panel-border);background:var(--btn-bg);display:flex}.nav-tab{color:var(--text-secondary);cursor:pointer;text-align:center;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:8px 4px;font-size:.75rem;font-weight:600;transition:color .1s,background-color .1s}.nav-tab:hover{color:var(--text-primary);background:var(--btn-hover)}.nav-tab.active{color:var(--accent-color);background:var(--panel-bg);border-bottom-color:var(--accent-color)}.menu-content{flex:1;padding:16px;overflow-y:auto}.tab-pane{flex-direction:column;gap:12px;display:flex}.control-group{flex-direction:column;gap:4px;display:flex}.group-label{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.05em;font-size:.65rem;font-weight:600}.options-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.option-btn{background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-primary);cursor:pointer;border-radius:2px;padding:8px;font-size:.75rem;font-weight:600;transition:all .1s}.option-btn:hover{background:var(--btn-hover)}.option-btn.selected{background:var(--accent-color);border-color:var(--accent-hover);color:#101012}.primary-action-btn{cursor:pointer;border:none;border-radius:2px;width:100%;margin-top:6px;padding:10px;font-size:.85rem;font-weight:700}.setting-row{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.setting-row:last-child{border-bottom:none}.setting-title{font-size:.8rem;font-weight:600}.setting-desc{color:var(--text-secondary);margin-top:1px;font-size:.7rem}.toggle-switch{background:var(--btn-border);cursor:pointer;border:none;border-radius:9px;width:34px;height:18px;transition:background-color .15s;position:relative}.toggle-switch:after{content:"";background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #00000026}.toggle-switch.on{background:var(--success)}.toggle-switch.on:after{transform:translate(16px)}.glass-select{background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-primary);border-radius:2px;outline:none;padding:4px 6px;font-family:inherit;font-size:.75rem;font-weight:500}.glass-select option{background:var(--panel-bg);color:var(--text-primary)}.saves-list{flex-direction:column;gap:6px;display:flex}.save-item{background:var(--btn-bg);border:1px solid var(--btn-border);cursor:pointer;border-radius:2px;justify-content:space-between;align-items:center;padding:8px 10px;transition:background-color .1s;display:flex}.save-item:hover{background:var(--btn-hover)}.save-details{flex-direction:column;display:flex}.save-name{font-size:.8rem;font-weight:600}.save-date{color:var(--text-secondary);font-size:.65rem}.delete-save-btn{color:var(--warning);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:1.1rem;transition:color .1s}.delete-save-btn:hover{color:var(--warning-hover)}.empty-state{text-align:center;color:var(--text-secondary);padding:20px 0;font-size:.75rem}.rules-text h3{margin-top:8px;margin-bottom:4px;font-size:.85rem;font-weight:700}.rules-text p,.rules-text ul{color:var(--text-secondary);margin-bottom:8px;font-size:.75rem;line-height:1.4}.rules-text ul{padding-left:14px}.capitalize{text-transform:capitalize}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}@media (width<=768px){body{overflow-y:auto}.app-shell{height:auto;overflow-y:auto}.app-main{flex-direction:column;gap:8px;height:auto;padding:8px}.board-container{aspect-ratio:1;flex:none;width:100%;max-height:80vh}.sidebar-container{flex:none;width:100%;height:auto}.stats-panel{height:auto;overflow-y:visible}}
