/*
 * Eggy Pool AI mobile application flow.
 *
 * Desktop remains untouched.
 */


/* ============================================================
   LOBBY AI CHALLENGE OVERLAY
   ============================================================ */

.epPoolAiMobileFlow
{
    position: fixed;
    inset: 0;

    z-index: 2147482400;

    width: 100vw;
    height: 100dvh;

    padding:
        max(8px, env(safe-area-inset-top))
        max(8px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom))
        max(8px, env(safe-area-inset-left));

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(57, 185, 120, .13),
            transparent 42%
        ),
        #080b0d;

    color: #f4f4f4;

    overflow: hidden;
}

.epPoolAiMobileFlow__chooser
{
    width: 100%;
    height: 100%;

    max-width: 1050px;

    margin: 0 auto;

    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(0, 1fr);

    gap: 7px;

    overflow: hidden;
}

.epPoolAiMobileFlow__head
{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 40px;

    padding:
        3px
        4px
        3px
        8px;
}

.epPoolAiMobileFlow__head > div
{
    min-width: 0;

    display: flex;
    align-items: baseline;

    gap: 9px;
}

.epPoolAiMobileFlow__head span
{
    color: #39b978;

    font-size: 8px;
    line-height: 1;
    font-weight: 850;

    letter-spacing: .09em;
}

.epPoolAiMobileFlow__head strong
{
    color: #fff;

    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

.epPoolAiMobileFlow__close
{
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius: 8px;

    background:
        rgba(255, 255, 255, .06);

    color: #fff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.epPoolAiMobileFlow__status
{
    min-height: 22px;

    padding: 2px 8px;

    color:
        rgba(255, 255, 255, .58);

    font-size: 10px;
    line-height: 18px;
}

.epPoolAiMobileFlow__status.is-error
{
    color: #ff8585;
}

.epPoolAiMobileFlow__grid
{
    min-height: 0;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 7px;

    padding-bottom: 2px;
}

.epPoolAiMobileFlow__card
{
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    gap: 5px;

    padding: 10px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .045);

    color: #fff;

    text-align: left;

    cursor: pointer;
}

.epPoolAiMobileFlow__card:active
{
    transform: scale(.985);
}

.epPoolAiMobileFlow__card:disabled
{
    opacity: .55;

    cursor: wait;
}

.epPoolAiMobileFlow__card strong
{
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
}

.epPoolAiMobileFlow__card > span
{
    color:
        rgba(255, 255, 255, .67);

    font-size: 9px;
    line-height: 1.2;
}

.epPoolAiMobileFlow__card b
{
    color: #39b978;

    font-size: 9px;
    line-height: 1.2;
}

.epPoolAiMobileFlow__card small
{
    color:
        rgba(255, 255, 255, .47);

    font-size: 8px;
    line-height: 1.35;
}


/* ============================================================
   EMBEDDED GAME ROOM
   ============================================================ */

.epPoolAiMobileFlow.is-room
{
    padding: 0;
}

.epPoolAiMobileFlow__room
{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #080b0d;
}

.epPoolAiMobileFlow__loading
{
    position: absolute;
    inset: 0;

    z-index: 2;

    display: grid;
    place-items: center;

    background: #080b0d;

    color:
        rgba(255, 255, 255, .7);

    font-size: 12px;
    font-weight: 800;
}

.epPoolAiMobileFlow__iframe
{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    background: #080b0d;
}


/* ============================================================
   DIRECT /pool-ai MOBILE PAGE
   ============================================================ */

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
{
    overflow: hidden;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.p-body-inner
{
    width: 100% !important;
    max-width: none !important;

    padding:
        5px
        max(7px, env(safe-area-inset-right))
        max(5px, env(safe-area-inset-bottom))
        max(7px, env(safe-area-inset-left))
        !important;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose
{
    width: 100%;
    height: calc(100dvh - 10px);

    display: grid;
    grid-template-rows:
        auto
        minmax(0, 1fr);

    gap: 5px;

    overflow: hidden;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__hero
{
    margin: 0 !important;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__hero .block-container
{
    min-height: 0 !important;

    padding: 7px 11px !important;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__hero h1
{
    margin: 2px 0 !important;

    font-size: 20px !important;
    line-height: 1 !important;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__hero p
{
    display: none !important;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__form
{
    min-height: 0;

    margin: 0 !important;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__form > .block-container
{
    height: 100%;

    padding: 6px !important;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        auto;

    gap: 6px;

    overflow: hidden;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__grid
{
    min-height: 0;

    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr))
        !important;

    gap: 6px !important;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__card
{
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 8px !important;

    overflow: hidden;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__card small
{
    font-size: 8px !important;
    line-height: 1.25 !important;
}

body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
.epPoolAiChoose__actions
{
    margin: 0 !important;
    padding: 0 !important;

    min-height: 38px;
}


/* Very short landscape phones */
@media
    (pointer: coarse)
    and (orientation: landscape)
    and (max-height: 390px)
{
    .epPoolAiMobileFlow__card small,
    body.epPoolMobilePhone.epPoolMobileLandscape.epPoolAiMobileChoosePage
    .epPoolAiChoose__card small
    {
        display: none !important;
    }

    .epPoolAiMobileFlow__card
    {
        gap: 4px;
        padding: 8px;
    }
}