/**
 * Design System Overrides
 * Ensures new design system takes priority over legacy styles.css
 * This file should load LAST to override any conflicting old styles.
 */

/* Force hide old elements that conflict with new layout */
.container {
    all: unset !important;
    display: block !important;
}

/* Ensure app container uses new layout */
.app-container {
    display: flex !important;
    min-height: 100vh !important;
}

/* Legacy button class overrides - redirect to new system */
.btn-start {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    min-height: 56px;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    border-radius: var(--radius-button);
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
    cursor: pointer;
    transition: all var(--timing-fast) var(--ease-out);
    white-space: nowrap;
    user-select: none;
}

.btn-start:hover:not(:disabled) {
    background: var(--color-accent-hover);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4);
    transform: translateY(-1px);
}

.btn-cashout {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    min-height: 56px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-size: 17px;
    font-weight: 600;
    border-radius: var(--radius-button);
    border: 1px solid var(--stroke-medium);
    cursor: pointer;
    transition: all var(--timing-fast) var(--ease-out);
    white-space: nowrap;
    user-select: none;
}

.btn-cashout:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--stroke-strong);
}

/* Legacy tile class - redirect to mine-tile styles */
.tile {
    aspect-ratio: 1;
    min-height: 100px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--stroke-medium);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--timing-fast) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    position: relative;
    overflow: hidden;
}

.tile:hover:not(.revealed):not(.disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--stroke-strong);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.2);
}

.tile.revealed {
    cursor: default;
    background: rgba(10, 132, 255, 0.15);
    border-color: var(--color-accent);
    box-shadow: 0 0 16px rgba(10, 132, 255, 0.3);
}

.tile.revealed.safe,
.tile.gem {
    background: rgba(48, 209, 88, 0.15);
    border-color: var(--color-success);
    box-shadow: 0 0 16px rgba(48, 209, 88, 0.3);
}

.tile.revealed.mine,
.tile.bomb {
    background: rgba(255, 69, 58, 0.15);
    border-color: var(--color-error);
    box-shadow: 0 0 16px rgba(255, 69, 58, 0.3);
    animation: mineExplode 0.3s var(--ease-out);
}

.tile.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Legacy game-grid - ensure it works like mines-grid */
.game-grid,
.mines-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-3);
}

/* Control panel should be styled as panel */
.control-panel {
    width: var(--panel-left-width);
    min-width: var(--panel-left-width);
    background: var(--color-bg-2);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Game container should work as center panel */
.game-container {
    flex: 1;
    min-width: 0;
    min-height: 600px;
    background: var(--color-bg-2);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* History panel should work as right panel */
.history-panel {
    width: var(--panel-right-width);
    min-width: var(--panel-right-width);
    flex-shrink: 0;
    background: var(--color-bg-2);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--stroke-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - var(--topbar-height) - (var(--space-3) * 2));
}

.history-panel h3 {
    font-size: var(--type-h3);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
}

.history-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Hide history panel on smaller screens */
@media (max-width: 1440px) {
    .history-panel {
        display: none;
    }
}

/* Override any old header styles */
header {
    all: unset;
}

/* ============================
   TOPBAR OVERRIDES - CLEAN FIX
   ============================ */

/* Adjust topbar layout to move buttons left */
.topbar {
    justify-content: space-between !important;
}

.topbar-right {
    margin-right: 40px !important;
}

/* Prevent styles.css button sizing from affecting topbar */
.topbar .btn-primary,
.topbar .btn-secondary,
.topbar .btn-ghost {
    width: auto !important;
    max-width: none !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    height: auto !important;
}

/* Topbar balance styling */
.topbar-balance {
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/* Override any old main styles */
main {
    margin-left: var(--sidebar-width);
    margin-top: var(--topbar-height);
    min-height: calc(100vh - var(--topbar-height));
    width: calc(100vw - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    padding: var(--space-3);
    display: flex;
    gap: var(--panel-gap);
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Ensure control sections use proper styling */
.control-section label {
    font-size: var(--type-label);
    color: var(--color-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    display: block;
    margin-bottom: var(--space-1);
}

/* Hide responsive warning on larger screens */
@media (min-width: 1024px) {
    body::before {
        display: none !important;
    }
}