* {
    box-sizing: border-box;
}


:root {
    --bg-top: #111820;
    --bg-bottom: #0a0e13;
    --panel: rgba(24, 33, 43, 0.92);
    --panel-border: rgba(255, 255, 255, 0.08);
    --tile: #184d83;
    --tile-hover: #2368aa;
    --tile-revealed: #d8e1eb;
    --tile-border: rgba(255, 255, 255, 0.11);
    --text: #f4f7fb;
    --muted: #9eabba;
    --accent: #67b4ff;
    --danger: #ff6b6b;
    --gold: #f7cf62;
    --gold-bright: #fff3a6;
}


body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at top,
            #1a2633 0%,
            var(--bg-top) 38%,
            var(--bg-bottom) 100%
        );

    color: var(--text);
}


button {
    font: inherit;
}


.game-shell {
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 24px 16px 36px;
}


.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}


.title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}


.wand {
    font-size: 36px;
}


h1 {
    margin: 0;
    font-size: 34px;
    letter-spacing: 0.08em;
}


.game-header p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}


.secondary-button,
.mode-button {
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 800;
}


.secondary-button {
    padding: 12px 14px;
    background: #202c38;
    color: var(--text);
    border: 1px solid var(--panel-border);

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.secondary-button:hover {
    background: #2a3948;
}


.secondary-button:active {
    transform: scale(0.97);
}


.status-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;

    padding: 12px;
    margin-bottom: 14px;

    border-radius: 16px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
}


.status-item {
    text-align: center;
}


.status-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}


.status-item strong {
    font-size: 18px;
}


.board-wrap {
    position: relative;
    width: 100%;
    padding: 10px;

    border-radius: 20px;
    background: rgba(4, 8, 12, 0.58);
    border: 1px solid var(--panel-border);

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.35);

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


.board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    width: 100%;
    aspect-ratio: 1 / 1;
}


.board-wrap.victory-flash {
    animation:
        boardVictoryFlash 1.1s ease;
}


.board-wrap.victory-flash .board {
    animation:
        boardVictoryPulse 0.75s ease;
}


@keyframes boardVictoryFlash {

    0% {
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.35);
    }

    25% {
        box-shadow:
            0 0 30px rgba(247, 207, 98, 0.65),
            0 0 70px rgba(247, 207, 98, 0.30);
    }

    55% {
        box-shadow:
            0 0 44px rgba(255, 243, 166, 0.85),
            0 0 100px rgba(247, 207, 98, 0.40);
    }

    100% {
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.35);
    }
}


@keyframes boardVictoryPulse {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.025);
    }

    100% {
        transform: scale(1);
    }
}


.tile {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1;

    border: 0;
    border-radius: 7px;

    background: var(--tile);
    color: white;

    font-size:
        clamp(15px, 4.4vw, 24px);

    font-weight: 900;
    cursor: pointer;
    user-select: none;

    -webkit-tap-highlight-color:
        transparent;

    box-shadow:
        inset 0 0 0 1px
        var(--tile-border);

    transition:
        background 0.12s ease,
        transform 0.1s ease;
}


.tile:hover {
    background: var(--tile-hover);
}


.tile:active:not(.revealed) {
    transform: scale(0.94);
}


.tile.revealed {
    background:
        var(--tile-revealed);

    color: #152331;
    cursor: default;
}


.tile.flagged {
    background: #1d5b90;
}


.tile.dark-magic {
    background: #21152f;
    color: var(--gold);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.11),
        inset 0 0 18px rgba(137, 78, 190, 0.35),
        0 0 12px rgba(247, 207, 98, 0.18);
}


.tile.n1 {
    color: #2453c8;
}


.tile.n2 {
    color: #2b7c45;
}


.tile.n3 {
    color: #c23c3c;
}


.tile.n4 {
    color: #623aa8;
}


.tile.n5 {
    color: #8d3f28;
}


.tile.n6 {
    color: #177b83;
}


.tile.n7 {
    color: #222a34;
}


.tile.n8 {
    color: #6a7280;
}


.controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}


.mode-button {
    min-height: 54px;
    background: #1d2834;
    color: var(--muted);
    border: 1px solid var(--panel-border);

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.12s ease;
}


.mode-button:hover {
    background: #273746;
}


.mode-button:active {
    transform: scale(0.97);
}


.mode-button.active {
    background: #1b5d97;
    color: white;

    box-shadow:
        0 8px 18px
        rgba(22, 89, 149, 0.32);
}


.help {
    margin-top: 12px;
    padding: 0 6px;

    color: var(--muted);
    text-align: center;

    font-size: 12px;
    line-height: 1.5;
}


.result-panel {
    margin-top: 16px;
    padding: 22px;

    text-align: center;
    border-radius: 18px;

    background: var(--panel);
    border: 1px solid var(--panel-border);

    animation:
        resultPanelAppear
        0.45s ease;
}


@keyframes resultPanelAppear {

    from {
        opacity: 0;
        transform:
            translateY(10px)
            scale(0.97);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


.result-panel.hidden,
.hidden {
    display: none;
}


.result-icon {
    font-size: 42px;
}


.result-panel h2 {
    margin: 8px 0 4px;
}


.result-panel p {
    margin: 0 0 16px;
    color: var(--muted);
}


.victory-spell {
    margin-top: 4px;

    color: var(--gold);

    font-size:
        clamp(28px, 8vw, 46px);

    font-weight: 1000;
    letter-spacing: 0.12em;

    text-shadow:
        0 0 10px
        rgba(247, 207, 98, 0.45),

        0 0 24px
        rgba(247, 207, 98, 0.20);

    animation:
        victorySpellGlow
        1.6s ease-in-out infinite alternate;
}


@keyframes victorySpellGlow {

    from {
        text-shadow:
            0 0 8px
            rgba(247, 207, 98, 0.35),

            0 0 18px
            rgba(247, 207, 98, 0.15);
    }

    to {
        text-shadow:
            0 0 15px
            rgba(255, 243, 166, 0.85),

            0 0 38px
            rgba(247, 207, 98, 0.45);
    }
}


.result-panel .secondary-button {
    width: 100%;
    min-height: 52px;
}


.victory-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(247, 207, 98, 0.17) 0%,
            rgba(21, 31, 43, 0.82) 42%,
            rgba(4, 8, 12, 0.96) 100%
        );

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    animation:
        victoryOverlayAppear
        0.35s ease forwards;
}


.victory-overlay.hidden {
    display: none;
}


@keyframes victoryOverlayAppear {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.victory-content {
    position: relative;
    z-index: 2;

    width: min(92vw, 700px);
    padding: 30px 20px;

    text-align: center;

    animation:
        victoryContentAppear
        0.75s
        cubic-bezier(
            0.2,
            0.9,
            0.2,
            1.15
        )
        forwards;
}


@keyframes victoryContentAppear {

    0% {
        opacity: 0;
        transform:
            scale(0.45);
    }

    60% {
        opacity: 1;
        transform:
            scale(1.08);
    }

    100% {
        opacity: 1;
        transform:
            scale(1);
    }
}


.victory-wand {
    margin-bottom: 4px;

    font-size:
        clamp(54px, 15vw, 96px);

    filter:
        drop-shadow(
            0 0 18px
            rgba(247, 207, 98, 0.75)
        );

    animation:
        victoryWandMove
        1.15s ease-in-out;
}


@keyframes victoryWandMove {

    0% {
        opacity: 0;
        transform:
            rotate(-30deg)
            scale(0.4);
    }

    45% {
        opacity: 1;
        transform:
            rotate(18deg)
            scale(1.18);
    }

    100% {
        transform:
            rotate(0deg)
            scale(1);
    }
}


.victory-title {
    color:
        var(--gold-bright);

    font-size:
        clamp(50px, 15vw, 104px);

    font-weight: 1000;
    line-height: 1;
    letter-spacing: 0.08em;

    text-shadow:
        0 0 8px
        rgba(255, 255, 255, 0.65),

        0 0 18px
        rgba(247, 207, 98, 0.90),

        0 0 42px
        rgba(247, 207, 98, 0.55),

        0 0 80px
        rgba(247, 207, 98, 0.28);

    animation:
        victoryTitleGlow
        0.8s ease-in-out infinite alternate;
}


@keyframes victoryTitleGlow {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.025);
    }
}


.victory-subtitle {
    margin-top: 14px;

    color: white;

    font-size:
        clamp(16px, 5vw, 28px);

    font-weight: 900;
    letter-spacing: 0.20em;

    text-shadow:
        0 2px 14px
        rgba(0, 0, 0, 0.65);

    animation:
        victorySubtitleAppear
        0.8s ease
        0.35s
        both;
}


@keyframes victorySubtitleAppear {

    from {
        opacity: 0;
        transform:
            translateY(14px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


.victory-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}


.sparkle {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--gold-bright);

    box-shadow:
        0 0 10px
        rgba(255, 243, 166, 0.95),

        0 0 22px
        rgba(247, 207, 98, 0.70);

    animation:
        sparkleBurst
        1.4s ease-out
        forwards;
}


@keyframes sparkleBurst {

    0% {
        opacity: 0;
        transform:
            translate(0, 0)
            scale(0.2);
    }

    12% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform:
            translate(
                var(--sparkle-x),
                var(--sparkle-y)
            )
            scale(1.35);
    }
}


@media (max-width: 430px) {

    .game-shell {
        padding-left: 10px;
        padding-right: 10px;
    }

    .game-header {
        align-items: flex-start;
    }

    h1 {
        font-size: 28px;
    }

    .game-header .secondary-button {
        padding: 10px;
        font-size: 12px;
    }

    .board-wrap {
        padding: 7px;
    }

    .board {
        gap: 3px;
    }

    .tile {
        border-radius: 5px;
    }

    .victory-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .victory-title {
        letter-spacing: 0.04em;
    }
}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* --------------------------------------------------
   Developer Credit
-------------------------------------------------- */

.developer-credit {
    margin-top: 24px;
    padding-top: 16px;

    text-align: center;

    font-size: 0.72rem;
    letter-spacing: 0.08em;

    color: #6f7f9a;
}


.developer-link {
    padding: 0;

    border: none;
    background: none;

    color: #8fa9d4;

    font: inherit;
    font-weight: 600;
    letter-spacing: inherit;

    cursor: pointer;

    transition:
        color 0.18s ease;
}


.developer-link:hover {
    color: #ffffff;
}


.developer-link:focus-visible {
    outline: 2px solid #8fa9d4;
    outline-offset: 4px;
    border-radius: 3px;
}


/* --------------------------------------------------
   About Pockit Labs Dialog
-------------------------------------------------- */

.about-dialog {
    width: min(90vw, 420px);
    padding: 0;

    border: 1px solid #334666;
    border-radius: 18px;

    background: #111b2e;
    color: #dce6f5;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.6);
}


.about-dialog::backdrop {
    background:
        rgba(3, 8, 18, 0.78);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


.about-dialog-content {
    padding: 30px 28px;

    text-align: center;
}


/* --------------------------------------------------
   About Brand Header
-------------------------------------------------- */

.about-brand {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-bottom: 24px;

    text-align: left;
}


.about-logo {
    display: block;

    width: 82px;
    height: 82px;

    flex-shrink: 0;

    object-fit: contain;

    border-radius: 14px;
}


.about-brand-text {
    min-width: 0;
}


.about-brand-text h2 {
    margin: 0 0 4px;

    color: var(--text);

    font-size: 1.7rem;
    line-height: 1.1;
}


.about-brand-text .about-tagline {
    margin: 0;

    color: #8fa9d4;

    font-size: 0.9rem;
    font-style: italic;

    line-height: 1.35;
}


/* --------------------------------------------------
   About Text
-------------------------------------------------- */

.about-dialog-content > p {
    margin: 0 0 16px;

    line-height: 1.6;
}


/* --------------------------------------------------
   About Social Links
-------------------------------------------------- */

.about-socials {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin: 22px 0 18px;
}


.about-social-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #202c38;
    border: 1px solid var(--panel-border);

    color: #ffffff;

    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.about-social-link:hover {
    background: #2a3948;

    transform:
        translateY(-2px);
}


.about-social-link:active {
    transform:
        scale(0.96);
}


.about-social-link:focus-visible {
    outline: 2px solid #8fa9d4;
    outline-offset: 4px;
}


/* --------------------------------------------------
   About Close Button
-------------------------------------------------- */

.about-close-button {
    width: 100%;

    margin-top: 10px;
}


/* --------------------------------------------------
   About Dialog Mobile
-------------------------------------------------- */

@media (max-width: 430px) {

    .about-dialog-content {
        padding: 24px 20px;
    }

    .about-brand {
        gap: 12px;

        margin-bottom: 20px;
    }

    .about-logo {
        width: 72px;
        height: 72px;
    }

    .about-brand-text h2 {
        font-size: 1.5rem;
    }

    .about-brand-text .about-tagline {
        font-size: 0.82rem;
    }

    .about-socials {
        margin-top: 18px;
        margin-bottom: 16px;
    }

    .about-social-link {
        width: 42px;
        height: 42px;
    }
}