*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Verdana,sans-serif;
    background:#181818;
    color:#fff;
    padding:40px;
}

h1{
    text-align:center;
    margin-bottom:35px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    max-width:1200px;
    margin:auto;
}

.card{
    position:relative;
    background:
        radial-gradient(circle at top,#242b38 0%,#1b212d 45%,#121720 100%);
    border:2px solid rgba(255,255,255,.18);
    border-radius:22px;
    min-height:210px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
    transition:.25s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 30px rgba(0,0,0,.45);
}

.card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,220,140,.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 40px rgba(0,0,0,.55),
        0 0 25px rgba(255,210,120,.08);
}

.card h2{
    margin-top:28px;
    margin-bottom:16px;
    font-size:34px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;

    background:linear-gradient(#fff6d6,#f5cf73);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 2px 8px rgba(0,0,0,.45);
}

.card h2::after{
    content:"";
    display:block;
    width:170px;
    height:2px;
    margin:18px auto 0;

    background:linear-gradient(
        to right,
        transparent,
        #d7b15f,
        transparent
    );
}

.word{
    --word-width:340px;

    position:relative;
    width:var(--word-width);
    height:90px;
    margin:0 auto;
    cursor:pointer;
    user-select:none;
}

.letter{
    position:absolute;
    width:56px;
    height:78px;

    overflow:visible;

    transform-style:preserve-3d;
    transition:
        left 1s ease,
        transform 1s ease;
}

.front,
.back{
    position:absolute;
    inset:0;

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

    font-size:64px;
    font-weight:900;
    letter-spacing: 0;

    background:linear-gradient(#fffdf4,#f5d786,#d8a847);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 2px 2px rgba(0,0,0,.35),
        0 6px 14px rgba(0,0,0,.45);

    backface-visibility:hidden;
}

.back{
    transform:rotateY(180deg);
}

.empty{
    opacity:.25;
}

#homophone{
    display:flex;
    justify-content:center;
    align-items:center;
    transition:opacity .3s;
}

.gold-text{
    background:linear-gradient(#fffdf4,#f5d786,#d8a847);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 2px 2px rgba(0,0,0,.35),
        0 6px 14px rgba(0,0,0,.45);
}

.wordplay-title{
    cursor:pointer;
    user-select:none;
}

.wordplay-popup{
    position:absolute;

    top:82px;
    left:20px;
    right:20px;

    display:none;

    padding:14px;

    background:#111822;
    border:1px solid rgba(245,207,115,.45);
    border-radius:12px;

    color:#ddd;
    font-size:16px;
    line-height:1.5;
    text-align:center;

    z-index:1000;

    pointer-events:none;

    box-shadow:0 10px 25px rgba(0,0,0,.45);
}

.wordplay-popup.show{
    display:block;
}

.wordplay-title{
    cursor:pointer;
    user-select:none;
}