:root{
    --cell: clamp(26px, 7vw, 38px);
    --gap: 3px;
    --bg-1: #131a2b;
    --bg-2: #0b0f1a;
    --panel: #1b2438;
    --panel-2: #232e46;
    --line: rgba(255, 255, 255, 0.08);
    --text: #e7ecf8;
    --muted: #93a1c0;
    --accent: #4f8cff;
    --accent-2: #22d3a6;
    --led: #ff4d4d;
    --card: #f4f7fc;
}

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg-2);
    background-image:
        radial-gradient(900px 500px at 15% -10%, rgba(79, 140, 255, 0.25), transparent 60%),
        radial-gradient(700px 500px at 90% 110%, rgba(34, 211, 166, 0.18), transparent 60%),
        linear-gradient(160deg, var(--bg-1), var(--bg-2));
    background-attachment: fixed;
}

.row{
    display: flex;
    flex-direction: row;
}

.col{
    display: flex;
    flex-direction: column;
}

.game{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.game > .col{
    gap: 14px;
    max-width: 100%;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* HEADER */

.game .center-v{
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--muted);
}

.counter-time,
.counter-bomb{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 77, 77, 0.25);
    border-radius: 10px;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--led);
    background: #0a0d16;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 18px rgba(255, 77, 77, 0.12);
    text-shadow: 0 0 12px rgba(255, 77, 77, 0.7);
}

/* BOARD */

.container{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 100%;
    overflow: auto;
    padding: 10px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--line);
    box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.5);
    scrollbar-color: var(--accent) transparent;
}

.container .row{
    gap: var(--gap);
    flex: 0 0 auto;
    width: max-content;
}

.container::-webkit-scrollbar{
    height: 8px;
    width: 8px;
}

.container::-webkit-scrollbar-thumb{
    border-radius: 8px;
    background: rgba(79, 140, 255, 0.5);
}

.mine-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: var(--cell);
    width: var(--cell);
    border: 0;
    border-radius: 6px;
    font-size: calc(var(--cell) * 0.56) !important;
    line-height: 1;
    color: #e07b00;
    background: #dbe3f0;
    box-shadow: inset 0 0 0 1px rgba(9, 14, 26, 0.18);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-text-stroke: 0.6px rgba(12, 18, 32, 0.55);
    user-select: none;
    animation: reveal 0.18s ease-out;
}

.cover{
    color: var(--text);
    cursor: pointer;
    background: linear-gradient(180deg, #4a5878, #333e5c);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -2px 0 rgba(0, 0, 0, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.35);
    text-shadow: none;
    animation: none;
    transition: filter 0.12s ease, transform 0.08s ease;
}

.cover:hover{
    filter: brightness(1.18);
}

.cover:active{
    transform: translateY(1px);
    filter: brightness(0.95);
}

.question-box{
    color: #ffd166;
    font-weight: bold;
}

.flag-box{
    color: #ff5a5a;
    font-weight: bold;
}

@keyframes reveal{
    from{
        transform: scale(0.82);
        opacity: 0.35;
    }
    to{
        transform: scale(1);
        opacity: 1;
    }
}

/* BUTTONS */

.btn,
.btn-new{
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn{
    flex: 1 1 92px;
    height: 44px;
    width: auto;
    max-width: 250px;
    font-size: 15px;
    color: #0d1424;
    background: linear-gradient(180deg, #ffffff, #dde5f3);
    box-shadow: 0 2px 0 rgba(15, 23, 42, 0.18), 0 6px 14px rgba(15, 23, 42, 0.14);
}

.btn:hover{
    filter: brightness(1.05);
}

.btn:active{
    transform: translateY(2px);
    box-shadow: 0 0 0 rgba(15, 23, 42, 0.18);
}

.btn-new{
    height: 46px;
    width: 100%;
    font-size: 22px;
    color: #08101f;
    background: linear-gradient(180deg, var(--accent-2), #16a583);
    box-shadow: 0 4px 0 #0e7a61, 0 10px 24px rgba(34, 211, 166, 0.28);
}

.btn-new:hover{
    filter: brightness(1.07);
}

.btn-new:active{
    transform: translateY(3px);
    box-shadow: 0 1px 0 #0e7a61;
}

/* MODAL */

.config-background{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow: auto;
    background-color: rgba(5, 8, 16, 0.78);
    backdrop-filter: blur(6px);
    z-index: 2;
}

.config{
    position: relative;
    display: flex;
    width: min(560px, 100%);
    max-height: 92vh;
    overflow: auto;
    padding: clamp(18px, 4vw, 32px);
    border-radius: 20px;
    color: #10182a;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
    animation: pop 0.2s ease-out;
}

.config > .col{
    gap: 14px;
    width: 100%;
}

@keyframes pop{
    from{
        transform: translateY(14px) scale(0.96);
        opacity: 0;
    }
    to{
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.config h1{
    margin: 0;
    font-size: clamp(20px, 5vw, 28px);
    letter-spacing: 3px;
    text-align: center;
}

.config h2{
    margin: 6px 0 0;
    font-size: clamp(13px, 3.4vw, 15px);
    letter-spacing: 2px;
    color: #64748b;
}

.config h3{
    margin: 0;
    font-size: 11px;
    letter-spacing: 2px;
    color: #64748b;
}

.config .row{
    flex-wrap: wrap;
    gap: 10px;
}

.config .center{
    gap: 12px;
}

.input-group{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #dce3ef;
}

.input-group input{
    height: 38px;
    width: 110px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid #cfd8e8;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #10182a;
    background: #f7f9fd;
}

.input-group input:focus{
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.msg{
    margin-top: 18px;
    font-size: clamp(38px, 11vw, 68px);
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
}

.mt-btn{
    margin-top: 14px;
}

/* UTILITIES */

.center-h{
    justify-content: center;
}

.center-v{
    align-items: center;
}

.center-between{
    justify-content: space-between;
}

.w-100{
    width: 100%;
}

.h-100{
    height: 100%;
}

@media (max-width: 420px){
    .game > .col{
        padding: 12px;
    }

    .counter-time,
    .counter-bomb{
        min-width: 78px;
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce){
    *{
        animation: none !important;
        transition: none !important;
    }
}