/* Mines Game CSS - Works with your existing HTML */
*,
:after,
:before {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    background: #131d2d !important;
    min-height: 100vh !important;
    color: #fff !important;
    overflow-x: hidden !important;
}

.game-layout {
    box-sizing: border-box;
    word-break: break-word;
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 24px;
    margin: 55px auto 40px !important;
    padding: 0 20px !important;
}

.game-column {
    box-sizing: border-box;
    word-break: break-word;
    display: flex;
    flex-direction: column;
}

.left-column {
    width: 400px;
    min-width: 350px;
    height: 649px;
}

.right-column {
    flex: 1;
    min-width: 0;
}



.betting-box {
    padding: 24px !important;
    display: flex;
    flex-direction: column;
    background: #1a1a3d;
    border-radius: 16px !important;
    box-sizing: border-box;
    word-break: break-word;
    height: 100%;
    position: fixed;
    right: 0;
    top: 56%;
    transform: translateY(-50%);
    width: 400px;
}

/* Media query for screens 1024px and below */
@media screen and (max-width: 1024px) {
    .betting-box {
        position: static; /* or 'relative' depending on your layout needs */
        right: auto;
        top: auto;
        transform: none;
        width: 100%; /* or whatever width works for your responsive design */
    }
}


/* Game Grid - Fixed 5x5 */
.game-grid {
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    max-width: 515px;
    opacity: 096%;
    transform: none;
    box-sizing: border-box;
    word-break: break-word;
    display: grid;
    margin: auto;
    top: -23px;
    position: relative;
}

/* Override inline styles for game tiles */
.game-tile {
    opacity: 1 !important;
    transform: none !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    appearance: button !important;
    text-transform: none !important;
    overflow: visible !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    line-height: 11.5px !important;
    margin: 0px !important;
    cursor: pointer !important;
    display: block !important;
    background: #21264a;
    border-radius: 8px !important;
    /* border: 6px solid rgb(255 255 255 / 2%) !important; */
    box-shadow: 0 4px 6px rgb(0 0 0 / 16%) !important;
    padding: 0px !important;
    position: relative !important;
    transition: filter 0.2s, background 0.2s, transform 0.2s !important;
    will-change: background, filter !important;
    aspect-ratio: 1/1 !important;
}

.game-tile:hover:not(.selected):not(.revealed) {
    filter: brightness(1.2) !important;
    transform: scale(1.02) !important;
    border-color: rgba(203, 176, 53, 0.3) !important;
}

.game-tile.selected {
    background: linear-gradient(135deg, #4382ba 0%, #0f3fc4 100%) !important;
    cursor: default !important;
    border-color: rgba(203, 176, 53, 0.5) !important;
}

.game-tile.revealed {
    opacity: 1 !important;
    cursor: default !important;
}

.game-tile.bomb {
    background: linear-gradient(325deg, #77240a 0%, #ff5334 100%) !important;
    box-shadow: 0 0 20px rgba(255, 65, 108, 0.3) !important;
    border-color: rgba(255, 65, 108, 0.3) !important;
}

.tile-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tile-content img {
    width: 60% !important;
    height: 60% !important;
    object-fit: contain !important;
}

.tile-front {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
    background: #111c29 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 20px !important;
    font-weight: bold !important;
    transition: transform 0.3s, opacity 0.3s !important;
}

.game-tile.selected .tile-front {
    animation: scaleOut 0.3s forwards !important;
}

.game-tile.selected .tile-content img {
    animation: scaleIn 0.3s forwards !important;
}

/* Game Info Header */
.game-info-header {
    box-sizing: border-box !important;
    word-break: break-word !important;
    display: flex !important;
    flex-direction: row !important;
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

/* Only show help button, hide others */
.game-info-header .info-button:not(:first-child) {
    display: none !important;
}

.info-button {
    background: #222248 !important;
    border-radius: 8px !important;
    color: #8F88A8 !important;
    height: 24px !important;
    padding: 0px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 18.2px !important;
    letter-spacing: 0.1px !important;
    transition: 0.2s !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 0px none rgb(143, 136, 168) !important;
    display: flex !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    appearance: button !important;
    text-transform: none !important;
    overflow: visible !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0px !important;
    gap: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}



.info-button svg {
    fill: #cbb035 !important;
}

/* Multiplier Display - Override inline styles */
.multiplier-display {
    background: #21264a !important;
    border-radius: 8px !important;
    padding: 10px !important;
    text-align: center !important;
    margin: 20px 0 !important;
    border: 0px solid rgba(255, 255, 255, 0.1) !important;
}

.multiplier-value {
    color: #cbb035 !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(180deg, #5f6892, #5f6892) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Game Stats - Override inline styles */
.game-stats {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 20px !important;
    padding: 12px !important;
    background: #222248 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
    padding: 0 4px !important;
}

.stat-label {
    color: #8F88A8 !important;
    margin-bottom: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

.stat-value {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Game Footer - Override inline styles */
.game-footer {
    box-sizing: border-box !important;
    word-break: break-word !important;
    position: absolute !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    height: 50px !important;
    width: 100% !important;
    padding: 12px !important;
    /* background: linear-gradient(rgba(26, 26, 61, 0.9), rgb(18 18 48)), url(https://tse1.mm.bing.net/th/id/OIP.4J6sej8jCOAo1A4BN0FaCAHaHb?cb=defcachec2&rs=1&pid=ImgDetMain&o=7&rm=3) no-repeat scroll 50% 50% / cover padding-box border-box; */
    border-radius: 0px 0px 12px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #8a8aa9 !important;
    /* border-top: 3px solid rgb(177 137 28) !important; */
}

.game-footer svg {
    fill: #cbb035 !important;
}

.game-footer span {
    color: #8690bf !important;
}

/* Animations */
@keyframes bottomTop {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Notification */
.notification {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, #1a1a3d 0%, #222248 100%) !important;
    color: white !important;
    border-radius: 8px !important;

    z-index: 1000 !important;
    animation: slideIn 0.3s ease !important;
    max-width: 300px !important;
    font-size: 14px !important;
    border: 0.5px solid rgb(255, 208, 0) !important;
    font-family: 'Outfit', sans-serif !important;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mine buttons - Override inline styles */
.mine-button {
    padding: 4px 8px !important;
    color: #8F88A8 !important;
    background: #1a1a3d !important;
    border-radius: 100px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 18.2px !important;
    letter-spacing: 0.1px !important;
    transition: all 0.3s !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0 !important;
}

.mine-button:hover:not(.active) {
    background: #222248 !important;
    color: #222248 !important;
}

.mine-button.active {
    background: #222248 !important;
    color: #5f6892 !important;
    font-weight: 600 !important;
}

/* Input styles - Override inline styles */
input {
    width: 100% !important;
    padding: 0.8rem !important;
    /* background-color: #2222482b!important; */
    border: 0px solid #4b5563 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    height: 42px !important;
}

input:focus {
    outline: none !important;
    border-color: #cbb035 !important;
}

input:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Action Button - Override inline styles */
#actionButton {
    background: linear-gradient(180deg, #c7892d, #e06e21);
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    letter-spacing: 0.2px !important;
    color: #101026 !important;
    transition: all 0.3s !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: auto !important;
    width: 100% !important;
    font-family: 'Outfit', sans-serif !important;
    height: auto !important;
}

#actionButton:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.138) !important;
}

/* Override ALL inline color styles */
[style*="color:rgb(95, 104, 146)"],
[style*="color:rgb(143, 136, 168)"],
[style*="color:rgb(71, 68, 105)"],
[style*="color:rgb(191, 195, 216)"],
[style*="color:rgb(134, 144, 191)"],
[style*="color:rgb(191, 195, 216)"] {
    color: #8F88A8 !important;
}

[style*="color:rgb(255, 255, 255)"] {
    color: #ffffff !important;
}

[style*="background:rgb(43, 41, 79)"],
[style*="background:rgb(32, 30, 66)"],
[style*="background:rgb(28, 34, 73)"],
[style*="background:rgb(46, 44, 93)"],
[style*="background:rgb(15 21 56)"] {
    /* background: #222248 !important; */
}

/* Font family overrides */
[style*="font-family:Rubik"],
[style*="font-family:Rubik, -apple-system, sans-serif"] {
    font-family: 'Outfit', sans-serif !important;
}

/* Currency icon */
.currency-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cbb035'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c0 1.82-1.34 2.98-3.13 3.29z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    pointer-events: none;
}

/* Remove fairness modal */
.fairness-modal {
    display: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .game-layout {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .left-column,
    .right-column {
        width: 100% !important;
        min-width: unset !important;
    }
    
    .left-column {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    .game-box {
        min-height: 500px !important;
    }
}

@media (max-width: 768px) {
    .game-layout {
        gap: 16px !important;
        margin-top: 90px !important;
        padding: 0 15px !important;
    }
    
    .betting-box {
        padding: 20px !important;
    }
    
    .game-box {
        /* padding: 20px 12px !important; */
        min-height: 515px !important;
    }
    
    .game-grid {
        gap: 5px !important;
        max-width: 325px !important;
    }
    
    .multiplier-display {
        padding: 12px !important;
        margin: 16px 0 !important;
    }
    
    .multiplier-value {
        font-size: 20px !important;
    }
    
    .game-stats {
        padding: 10px !important;
        margin-top: 16px !important;
    }
    
    .info-button {
        font-size: 11px !important;
        padding: 0px 10px !important;
        height: 28px !important;
    }
    
    .game-footer {
        font-size: 11px !important;
        padding: 10px !important;
        height: 44px !important;
    }
}

@media (max-width: 480px) {
    .game-layout {
        gap: 12px !important;
        margin-top: 80px !important;
        padding: 0 10px !important;
    }
    
    .betting-box {
        padding: 16px !important;
    }
    
    .game-box {
        /* padding: 16px 8px !important; */
        min-height: 400px !important;
    }
    
    .game-grid {
        gap: 6px !important;
        max-width: 320px !important;
    }
    
    .game-tile {
        min-height: 50px !important;
    }
    
    .multiplier-display {
        padding: 10px !important;
        margin: 12px 0 !important;
    }
    
    .multiplier-value {
        font-size: 18px !important;
    }
    
    .game-stats {
        padding: 8px !important;
        margin-top: 12px !important;
    }
    
    .stat-label {
        font-size: 10px !important;
    }
    
    .stat-value {
        font-size: 12px !important;
    }
    
    .info-button {
        font-size: 10px !important;
        padding: 0px 8px !important;
        height: 26px !important;
        gap: 3px !important;
    }
    
    .game-footer {
        font-size: 10px !important;
        padding: 8px !important;
        height: 40px !important;
        gap: 6px !important;
    }
    
    .notification {
        padding: 10px 16px !important;
        font-size: 12px !important;
        max-width: 280px !important;
        right: 10px !important;
        left: 10px !important;
    }
}

@media (max-width: 360px) {
    .game-grid {
        gap: 4px !important;
        max-width: 280px !important;
    }
    
    .game-tile {
        min-height: 45px !important;
    }
    
    .betting-box {
        padding: 14px !important;
    }
    
    .info-button span {
        display: none !important;
    }
    
    .info-button {
        padding: 0px 6px !important;
        gap: 2px !important;
    }
    
    .left-column {
        min-width: 100% !important;
    }
}

/* Fix tile content alignment */
.tile-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.tile-content img {
    width: 70% !important;
    height: 70% !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Fix tile front alignment */
.tile-front {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
    background: #1a1f40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 20px !important;
    font-weight: bold !important;
    transition: transform 0.3s, opacity 0.3s !important;
}

/* Fix tile structure */
.game-tile {
    position: relative !important;
    overflow: hidden !important;
}

/* Reset tile innerHTML structure */
.game-tile > .tile-content {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure images are properly centered in bombs */
.game-tile.bomb .tile-content img,
.game-tile:not(.bomb):not(.selected) .tile-content img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70% !important;
    height: 70% !important;
}

/* Fix for selected tiles */
.game-tile.selected .tile-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Specific fix for diamond images */
.game-tile.selected .tile-content img[alt="Diamond"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70% !important;
    height: 70% !important;
}

/* Specific fix for bomb images */
.game-tile.bomb .tile-content img[alt="Bomb"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70% !important;
    height: 70% !important;
}

/* Fix scale animations */
.game-tile.selected .tile-front {
    animation: scaleOut 0.3s forwards !important;
    transform-origin: center !important;
}

.game-tile.selected .tile-content img {
    animation: scaleIn 0.3s forwards !important;
    transform-origin: center !important;
}

/* Ensure it doesn't conflict with header */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

/* Remove any leftover fairness button */
#fairnessButton {
    display: none !important;
}