/**
 * Arena Sizing - Bet sizing controls, slider, buttons, overbet UI
 *
 * Extracted from arena-panels.css for maintainability.
 * Controls the tactical HUD sizing section including:
 * - Size buttons (pot fractions, BB multipliers)
 * - Overbet toggle and drop-up grid
 * - Quick buttons (instant-execute sizing)
 * - OB button column (postflop vertical overbet menu)
 * - All-in action button
 *
 * Specificity: Uses direct class selectors (0,1,0)
 */

/* ============================================
   TACTICAL HUD - Sizing Section
   ============================================ */

.sizing-section {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 10px;
    margin-top: 0;
    background: linear-gradient(180deg, #0d0d12 0%, #12121a 100%);
    border: 1px solid rgba(var(--color-cyan-rgb), 0.2);
    border-radius: var(--radius-md);
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}

.sizing-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: relative;
    z-index: var(--z-base);
    flex-shrink: 0;
}

.sizing-label {
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    color: rgba(var(--color-cyan-rgb), 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(var(--color-cyan-rgb), 0.3);
}

.sizing-amount {
    font-family: var(--font-family-mono);
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-cyan);
    text-shadow: 0 0 15px rgba(var(--color-cyan-rgb), 0.6);
    letter-spacing: 0.5px;
}

/* Sizing Grid */
.sizing-grid {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-1);
    position: relative;
    z-index: var(--z-base);
}

/* Ensure hidden grids stay hidden */
.sizing-grid[style*="display: none"] {
    display: none !important;
}

.size-btn {
    padding: var(--space-2) 10px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-mono);
    background: rgba(20, 20, 30, 0.9);
    border: 1px solid rgba(var(--color-cyan-rgb), 0.15);
    border-radius: var(--radius-sm);
    color: rgba(var(--color-cyan-rgb), 0.85);
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out), color var(--duration-normal) var(--ease-in-out), transform var(--duration-normal) var(--ease-in-out);
    text-align: center;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Accent underline */
.size-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-cyan);
    transition: width var(--duration-normal) var(--ease-in-out);
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(var(--color-cyan-rgb), 0.5);
}

.size-btn:hover {
    background: rgba(var(--color-cyan-rgb), 0.08);
    border-color: rgba(var(--color-cyan-rgb), 0.4);
    color: rgba(var(--color-cyan-rgb), 0.9);
    transform: var(--btn-hover-lift);
}

.size-btn:hover::after {
    width: 60%;
}

.size-btn:active {
    transform: var(--btn-active-press);
    transition: transform 0.05s ease;
}

.size-btn.selected {
    background: rgba(var(--color-cyan-rgb), 0.12);
    border-color: rgba(var(--color-cyan-rgb), 0.6);
    color: var(--color-cyan);
    text-shadow: 0 0 10px rgba(var(--color-cyan-rgb), 0.5);
}

.size-btn.selected::after {
    width: 80%;
}

/* Overbet - Warning orange */
.size-btn.overbet {
    background: rgba(30, 20, 15, 0.9);
    border-color: rgba(var(--color-overbet-rgb), 0.2);
    color: rgba(255, 160, 80, 0.85);
}

.size-btn.overbet::after {
    background: var(--color-overbet);
    box-shadow: 0 0 8px rgba(var(--color-overbet-rgb), 0.5);
}

.size-btn.overbet:hover {
    background: rgba(var(--color-overbet-rgb), 0.1);
    border-color: rgba(var(--color-overbet-rgb), 0.5);
    color: rgba(255, 180, 100, 0.95);
}

.size-btn.overbet.selected {
    background: rgba(var(--color-overbet-rgb), 0.15);
    border-color: rgba(var(--color-overbet-rgb), 0.7);
    color: #ff9944;
    text-shadow: 0 0 10px rgba(var(--color-overbet-rgb), 0.5);
}

/* ============================================
   OVERBET TOGGLE - Base (Hazard styling)
   ============================================ */

.overbet-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px var(--space-3);
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    background: linear-gradient(90deg, rgba(30, 20, 10, 0.9) 0%, rgba(40, 25, 15, 0.9) 50%, rgba(30, 20, 10, 0.9) 100%);
    border: 1px solid rgba(var(--color-overbet-rgb), 0.25);
    border-radius: var(--radius-sm);
    color: rgba(255, 160, 80, 0.9);
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out), color var(--duration-normal) var(--ease-in-out);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: var(--z-base);
    overflow: visible;
    flex-shrink: 0;
}

/* Hazard stripe */
.overbet-toggle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: repeating-linear-gradient(-45deg, var(--color-overbet), var(--color-overbet) 3px, #1a1510 3px, #1a1510 6px);
    opacity: 0.6;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.overbet-toggle:hover {
    background: linear-gradient(90deg, rgba(50, 30, 15, 0.95) 0%, rgba(60, 35, 20, 0.95) 50%, rgba(50, 30, 15, 0.95) 100%);
    border-color: rgba(var(--color-overbet-rgb), 0.5);
    color: rgba(255, 180, 100, 0.95);
    box-shadow: 0 0 15px rgba(var(--color-overbet-rgb), 0.15);
}

.overbet-toggle:hover::before {
    opacity: 1;
}

.overbet-toggle.active {
    background: rgba(var(--color-overbet-rgb), 0.15);
    border-color: rgba(var(--color-overbet-rgb), 0.6);
    color: #ff9944;
    box-shadow: 0 0 20px rgba(var(--color-overbet-rgb), 0.2);
}

.overbet-arrow {
    font-size: 0.75rem;
    transition: transform var(--duration-slow) var(--ease-in-out);
    color: inherit;
}

.overbet-toggle.active .overbet-arrow {
    transform: rotate(180deg);
}

/* ============================================
   OVERBET TOGGLE - Compact variant
   (used in quick-button rows and OB column)
   ============================================ */

.slider-quick-buttons .overbet-toggle,
.ob-slider-wrapper .overbet-toggle {
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: rgba(30, 20, 10, 0.9);
    border-radius: 3px;
    letter-spacing: normal;
    z-index: auto;
    overflow: hidden;
}

/* No hazard stripe in compact variant */
.slider-quick-buttons .overbet-toggle::before,
.ob-slider-wrapper .overbet-toggle::before {
    display: none;
}

.slider-quick-buttons .overbet-toggle:hover,
.ob-slider-wrapper .overbet-toggle:hover {
    background: rgba(var(--color-overbet-rgb), 0.15);
    box-shadow: none;
}

.slider-quick-buttons .overbet-toggle.active,
.ob-slider-wrapper .overbet-toggle.active {
    background: rgba(var(--color-overbet-rgb), 0.2);
    box-shadow: none;
}

.slider-quick-buttons .overbet-toggle:active,
.ob-slider-wrapper .overbet-toggle:active {
    transform: scale(0.93);
    transition: transform 0.06s ease-out;
}

.slider-quick-buttons .overbet-toggle:focus-visible,
.ob-slider-wrapper .overbet-toggle:focus-visible {
    outline: 2px solid rgba(var(--color-overbet-rgb), 0.6);
    outline-offset: 1px;
}

.slider-quick-buttons .overbet-toggle .overbet-arrow,
.ob-slider-wrapper .overbet-toggle .overbet-arrow {
    font-size: 8px;
    transition: transform var(--duration-normal) var(--ease-in-out);
}

/* Overbet Grid - Drop-UP menu */
.overbet-container {
    position: relative;
    flex-shrink: 0;
}

.overbet-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--space-2);
    padding: var(--space-2);
    background: linear-gradient(180deg, rgba(30, 20, 10, 0.98) 0%, rgba(40, 25, 15, 0.98) 100%);
    border: 1px solid rgba(var(--color-overbet-rgb), 0.4);
    border-radius: var(--radius-md);
    box-shadow: 0 -4px 20px var(--alpha-black-50), 0 0 15px rgba(var(--color-overbet-rgb), 0.15);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal) var(--ease-in-out), visibility var(--duration-normal) var(--ease-in-out);
    min-width: 80px;
}

.overbet-grid.visible {
    opacity: 1;
    visibility: visible;
}

.overbet-grid.hidden {
    display: none;
}

.overbet-grid .size-btn {
    padding: var(--space-2) var(--space-4);
    min-width: 70px;
}

/* Sizing Actions - All-In button */
.sizing-actions {
    display: flex;
    gap: 6px;
    margin-top: 0;
    position: relative;
    z-index: var(--z-base);
    flex-shrink: 0;
}

/* All-In - Maximum impact (now the only button) */
.sizing-actions .action-btn.allin {
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    font-weight: var(--font-weight-black);
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #00e4b8 0%, #00d4aa 40%, #00b894 100%);
    border: 1px solid rgba(0, 255, 200, 0.5);
    color: #003d2d;
    box-shadow: 0 0 15px rgba(0, 228, 184, 0.4), 0 2px 10px var(--alpha-black-40), inset 0 1px 0 var(--alpha-white-15);
    position: relative;
    overflow: hidden;
}

.sizing-actions .action-btn.allin:not(:disabled):hover {
    background: linear-gradient(180deg, #00f4c8 0%, #00e4b8 40%, #00d4aa 100%);
    box-shadow: 0 0 35px rgba(0, 228, 184, 0.6), 0 6px 25px var(--alpha-black-50), inset 0 2px 0 var(--alpha-white-20);
    transform: translateY(-3px) scale(1.05);
}

.sizing-actions .action-btn.allin:not(:disabled):active {
    transform: var(--btn-active-press);
    box-shadow: 0 0 40px rgba(0, 228, 184, 0.7), inset 0 3px 10px var(--alpha-black-40);
    transition: transform 0.08s ease-out;
}

/* ============================================
   BET SLIDER
   ============================================ */

.bet-slider-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
}

.bet-slider-container.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Quick Buttons */
.slider-quick-buttons {
    display: flex;
    gap: var(--space-1);
    flex-wrap: nowrap;
    align-items: center;
}

.quick-btn {
    padding: var(--space-1) var(--space-2);
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    background: rgba(20, 25, 30, 0.8);
    border: 1px solid rgba(var(--color-cyan-rgb), 0.2);
    border-radius: 3px;
    color: rgba(var(--color-cyan-rgb), 0.85);
    cursor: pointer;
    transition: background var(--duration-quick) var(--ease-in-out), border-color var(--duration-quick) var(--ease-in-out), color var(--duration-quick) var(--ease-in-out);
    text-transform: uppercase;
}

.quick-btn:hover {
    background: rgba(var(--color-cyan-rgb), 0.1);
    border-color: rgba(var(--color-cyan-rgb), 0.4);
    color: rgba(var(--color-cyan-rgb), 0.9);
}

.quick-btn:active {
    transform: scale(0.93);
    transition: transform 0.06s ease-out;
}

.quick-btn:focus-visible {
    outline: 2px solid rgba(var(--color-cyan-rgb), 0.6);
    outline-offset: 1px;
}

.quick-btn.selected {
    background: rgba(var(--color-cyan-rgb), 0.15);
    border-color: rgba(var(--color-cyan-rgb), 0.6);
    color: var(--color-cyan);
    box-shadow: 0 0 8px rgba(var(--color-cyan-rgb), 0.3);
}

.quick-btn.overbet {
    border-color: rgba(var(--color-overbet-rgb), 0.2);
    color: rgba(var(--color-overbet-rgb), 0.85);
}

.quick-btn.overbet:hover {
    background: rgba(var(--color-overbet-rgb), 0.1);
    border-color: rgba(var(--color-overbet-rgb), 0.4);
    color: rgba(var(--color-overbet-rgb), 0.9);
}

.quick-btn.overbet:focus-visible {
    outline: 2px solid rgba(var(--color-overbet-rgb), 0.6);
    outline-offset: 1px;
}

.quick-btn.overbet.selected {
    background: rgba(var(--color-overbet-rgb), 0.15);
    border-color: rgba(var(--color-overbet-rgb), 0.6);
    color: #ff9944;
}

.quick-btn.allin {
    background: rgba(0, 228, 184, 0.1);
    border-color: rgba(0, 228, 184, 0.3);
    color: rgba(0, 228, 184, 0.8);
}

.quick-btn.allin:hover {
    background: rgba(0, 228, 184, 0.2);
    border-color: rgba(0, 228, 184, 0.5);
    color: #00e4b8;
}

.quick-btn.allin:focus-visible {
    outline: 2px solid rgba(0, 228, 184, 0.6);
    outline-offset: 1px;
}

.quick-btn.allin.selected {
    background: rgba(0, 228, 184, 0.25);
    border-color: rgba(0, 228, 184, 0.7);
    color: #00e4b8;
    box-shadow: 0 0 10px rgba(0, 228, 184, 0.4);
}

/* Overbet Container (drop-up) */
.slider-quick-buttons .overbet-container {
    position: relative;
    display: inline-flex;
}

/* Overbet Grid - Drop UP (quick-button row) */
.slider-quick-buttons .overbet-grid {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 6px;
    margin-bottom: 6px;
    background: rgba(20, 15, 10, 0.95);
    border: 1px solid rgba(var(--color-overbet-rgb), 0.3);
    border-radius: var(--radius-sm);
    box-shadow: 0 -4px 16px var(--alpha-black-50);
    z-index: var(--z-modal);
}

.slider-quick-buttons .overbet-grid.hidden {
    display: none;
}

.slider-quick-buttons .overbet-grid.visible {
    display: flex;
}

.slider-quick-buttons .overbet-grid .quick-btn {
    min-width: 50px;
    text-align: center;
}

/* ============================================
   OVERBET BUTTON COLUMN (postflop)
   ============================================ */

.ob-slider-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.ob-vertical-slider {
    position: absolute;
    bottom: 100%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 56px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(30, 20, 10, 0.98) 0%, rgba(20, 12, 6, 0.98) 100%);
    border: 1px solid rgba(var(--color-overbet-rgb), 0.4);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    box-shadow: 0 -6px 24px var(--alpha-black-50), 0 0 15px rgba(var(--color-overbet-rgb), 0.15);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-slow) var(--ease-in-out), visibility var(--duration-slow) var(--ease-in-out), transform var(--duration-slow) var(--ease-in-out);
    transform: translateX(-50%) translateY(10px);
}

.ob-vertical-slider.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.ob-vertical-slider.hidden {
    display: none;
}

/* OB button column layout */
.ob-button-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.ob-button-column .quick-btn {
    width: 100%;
    text-align: center;
    padding: 5px var(--space-1);
    font-size: 0.75rem;
    min-width: unset;
}

/* ALL-IN at top gets a separator */
.ob-button-column .quick-btn.allin {
    margin-bottom: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(var(--color-overbet-rgb), 0.2);
}