.carrom-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);max-width:650px;margin:0 auto;padding:var(--space-4);min-height:calc(100dvh - 56px)}.carrom-main{width:100%;display:flex;flex-direction:column;gap:var(--space-4);align-items:center}.carrom-lobby{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);width:100%}.carrom-lobby__title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:900;color:var(--game-accent)}.carrom-lobby__desc{font-size:var(--text-base);color:var(--color-text-secondary);max-width:480px;line-height:1.6}.carrom-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4);width:100%;margin-top:var(--space-4)}.carrom-mode-card{background:var(--color-surface-overlay);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);text-align:left;transition:all var(--duration-normal) ease}.carrom-mode-card:hover{border-color:var(--game-accent);transform:translateY(-2px)}.carrom-mode-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;color:var(--color-text-primary)}.carrom-mode-desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.5;flex-grow:1}.carrom-hud-bar{display:flex;justify-content:space-between;align-items:center;background:var(--color-surface-overlay);border:1px solid var(--color-border-default);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);width:100%}.carrom-hud-item{display:flex;flex-direction:column;align-items:center}.carrom-hud-label{font-size:10px;text-transform:uppercase;color:var(--color-text-secondary);letter-spacing:.05em}.carrom-hud-value{font-family:var(--font-display);font-size:var(--text-base);font-weight:800;color:var(--game-accent)}.carrom-board-wrap{position:relative;width:100%;max-width:480px;aspect-ratio:1;background:#3e2e22;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 10px 30px #00000080}.carrom-canvas{width:100%;height:100%;display:block;touch-action:none}.carrom-controls{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:480px}.carrom-slider-row{display:flex;flex-direction:column;gap:var(--space-1)}.carrom-slider-label{font-size:var(--text-xs);color:var(--color-text-secondary);text-transform:uppercase;font-weight:600;letter-spacing:.05em}.carrom-slider{width:100%;height:6px;border-radius:var(--radius-full);background:var(--color-surface-raised);outline:none;-webkit-appearance:none}.carrom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:var(--radius-full);background:var(--game-accent);cursor:pointer;border:2px solid #fff;transition:background var(--duration-fast)}.carrom-slider::-webkit-slider-thumb:hover{background:var(--game-accent-hover)}.carrom-challenge-link{font-family:var(--font-mono);font-size:var(--text-xs);background:var(--color-surface-sunken);border:1px solid var(--color-border-default);padding:var(--space-2);border-radius:var(--radius-md);text-align:center;word-break:break-all;width:100%}.carrom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f1117f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);z-index:100;opacity:0;pointer-events:none;transition:opacity var(--duration-normal);padding:var(--space-6)}.carrom-overlay.show{opacity:1;pointer-events:all}.carrom-overlay-title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:900;color:var(--game-accent);text-align:center}.carrom-overlay-body{font-size:var(--text-sm);color:var(--color-text-secondary);text-align:center;max-width:320px;line-height:1.6}.carrom-overlay-score{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:900;color:var(--color-status-success)}