/* ===============================
   WRAPPER CARD
================================ */
#uug-ttt-wrapper{
    max-width:360px;
    margin:40px auto;
    padding:20px;
    text-align:center;
    background:#111;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ===============================
   GREEN RESULT BAR
================================ */
#uug-ttt-message{
    display:none;
    margin:16px auto 18px;
    padding:14px 26px;
    font-size:15px;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg,#15803d,#22c55e);
    border-radius:10px;
    box-shadow:0 6px 14px rgba(0,0,0,.25);
    text-align:center;
    max-width:360px;
}

/* ===============================
   BOARD GRID
================================ */
#uug-ttt-board{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

/* ===============================
   CELLS
================================ */
.uug-ttt-cell{
    width:100px;
    height:100px;
    font-size:36px;
    font-weight:bold;
    border-radius:14px;

    border:1px solid rgba(255,255,255,.5);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 4px 10px rgba(0,0,0,.35);

    background:#1b1b1b;
    color:#fff;
    cursor:pointer;
    transition:.18s ease;
}

.uug-ttt-cell:hover{
    transform:translateY(-2px);
    background:#242424;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        0 8px 18px rgba(0,0,0,.45);
}

.uug-ttt-cell:active{ transform:scale(.95); }

.uug-ttt-cell.x{ color:#4da3ff; }
.uug-ttt-cell.o{ color:#ffb347; }

/* ===============================
   BOARD RESULT OVERLAY
================================ */
#uug-ttt-board-overlay{
    position:absolute;
    inset:0;
    border-radius:16px;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
    z-index:20;
}
#uug-ttt-board-overlay.show{ display:flex; }

.uug-ttt-points{
    font-size:52px;
    font-weight:900;
    color:#fde047;
}
.uug-ttt-label{
    margin-top:6px;
    font-size:14px;
    font-weight:700;
    color:#fff;
}

/* =====================================
   FULLSCREEN OVERLAY
===================================== */
#uug-play-banner{
    position:fixed;
    inset:0;
    z-index:999999;

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

    background:rgba(0,0,0,0.2);
    backdrop-filter:blur(1px);
}

#uug-play-banner.show{
    display:flex !important;
}

/* =====================================
   GREEN MODAL CARD
===================================== */
.uug-play-modal{
    background:linear-gradient(135deg,#16a34a,#22c55e);
    border-radius:18px;
    padding:26px 22px;
    text-align:center;

    box-shadow:0 20px 40px rgba(0,0,0,0.35);

    width:min(420px, 90vw);
    animation:uugFadeIn .25s ease;
}

@keyframes uugFadeIn{
    from{transform:translateY(10px);opacity:0;}
    to{transform:translateY(0);opacity:1;}
}

/* TITLE */
.uug-play-modal .ready{
    font-size:22px;
    font-weight:900;
    color:#fde047;
    margin-bottom:10px;
}

/* COUNTDOWN TEXT */
.uug-play-modal .countdown{
    color:#ffffff;
    font-weight:600;
    margin-bottom:16px;
}

/* LOGIN NOTE */
.uug-guest-earn-note{
    color:#ffffff;
    font-size:13px;
    margin-bottom:10px;
    font-weight:700;        /* ← makes it bold */
    letter-spacing:.2px;    /* ← cleaner premium look */
}


/* =====================================
   BUTTON AREA
===================================== */
.uug-play-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}

/* BUTTON BASE */
.uug-btn-again,
.uug-btn-other{
    border:none;
    border-radius:12px;
    padding:12px 18px;
    font-weight:800;
    cursor:pointer;
    min-width:140px;
    flex:1;
    transition:.15s ease;
}

.uug-btn-again{
    background:#fde047;
    color:#000;
}

.uug-btn-other{
    background:#0ea5e9;
    color:#fff;
}

.uug-btn-again:hover,
.uug-btn-other:hover{
    transform:translateY(-1px);
}

/* ===============================
   MOBILE PERFECT GRID FIX
================================ */
@media (max-width:520px){

    #uug-ttt-wrapper{
        max-width:92vw;
        margin:18px auto;
        padding:14px;
    }

    #uug-ttt-board{
        gap:8px;
    }

    .uug-ttt-cell{
        width:100%;
        aspect-ratio:1/1;
        font-size:7vw;
    }
}

/* =====================================
   MOBILE BUTTON STACK
===================================== */
@media (max-width:480px){

    .uug-play-actions{
        flex-direction:column;
        gap:10px;
    }

    .uug-btn-again,
    .uug-btn-other{
        width:100%;
    }
}



/* ===============================
   HELPER TEXT UNDER BOARD
================================ */
.uug-ttt-help{
    margin-top:16px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

/* OXO title — soft premium glow */
.uug-ttt-oxo{
    font-size:18px;
    font-weight:900;
    letter-spacing:3px;

    /* softer warm yellow */
    color:#fcd34d;

    /* reduced glow (eye-friendly) */
    text-shadow:
        0 0 4px rgba(252,211,77,0.35),
        0 0 8px rgba(251,191,36,0.25);
}


/* Instruction text */
.uug-ttt-help-text{
    font-size:14px;
    font-weight:700;

    /* Bright cyan-green gradient */
    background:linear-gradient(135deg,#22d3ee,#4ade80);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    opacity:1; /* brighter */
}