.axisdle-page{

    min-height:100vh;
    padding:150px 24px 72px;

}

.axisdle-panel{

    width:min(680px, 100%);
    margin:auto;
    padding:38px;
    border:1px solid var(--border);
    border-radius:var(--radius-large);
    background:rgba(8, 26, 44, .78);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(12px);

}

.axisdle-game-header{

    text-align:center;
    margin-bottom:28px;

}

.axisdle-eyebrow{

    margin:0 0 6px;
    color:var(--secondary);
    font-size:.82rem;
    letter-spacing:.12em;
    text-transform:uppercase;

}

.axisdle-game-header h1{

    margin:0;
    font-size:clamp(2.4rem, 6vw, 3.8rem);

}

.axisdle-message{

    min-height:1.5em;
    margin:10px 0 0;
    color:var(--text-muted);

}

.axisdle-board{

    display:grid;
    gap:8px;
    width:min(340px, 100%);
    margin:0 auto 28px;

}

.axisdle-row{

    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:8px;

}

.axisdle-cell{

    display:grid;
    aspect-ratio:1;
    place-items:center;
    border:1px solid rgba(255,255,255,.2);
    border-radius:var(--radius-small);
    background:rgba(2,11,22,.42);
    color:var(--text);
    font-family:"Cinzel", serif;
    font-size:1.5rem;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    transition:transform var(--transition-fast), background var(--transition-normal), border-color var(--transition-normal);

}

.axisdle-cell:not(.axisdle-cell--empty){

    animation:axisdle-letter-in .16s ease-out;

}

.axisdle-cell--correct{

    border-color:#65c7ff;
    background:#237eae;

}

.axisdle-cell--present{

    border-color:#d5b65a;
    background:#8c6d24;

}

.axisdle-cell--absent{

    border-color:rgba(255,255,255,.1);
    background:#182434;
    color:rgba(255,255,255,.76);

}

.axisdle-keyboard{

    display:grid;
    gap:8px;
    margin:auto;

}

.axisdle-keyboard-row{

    display:flex;
    justify-content:center;
    gap:6px;

}

.axisdle-key{

    min-width:31px;
    height:48px;
    padding:0 8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:var(--surface-light);
    color:var(--text);
    font:700 .82rem/1 Arial, Helvetica, sans-serif;
    cursor:pointer;
    transition:transform var(--transition-fast), filter var(--transition-fast), background var(--transition-normal);

}

.axisdle-key:hover:not(:disabled){

    transform:translateY(-2px);
    filter:brightness(1.14);

}

.axisdle-key:focus-visible{

    outline:2px solid var(--secondary);
    outline-offset:2px;

}

.axisdle-key:disabled{

    cursor:default;
    opacity:.72;

}

.axisdle-key--wide{

    min-width:62px;
    font-size:.7rem;

}

.axisdle-key--correct{

    background:#237eae;

}

.axisdle-key--present{

    background:#8c6d24;

}

.axisdle-key--absent{

    background:#182434;
    color:rgba(255,255,255,.65);

}

.axisdle-stats{

    margin-top:34px;
    padding-top:24px;
    border-top:1px solid var(--border);
    text-align:center;

}

.axisdle-stats h2{

    margin:0 0 16px;
    font-size:1rem;
    color:var(--secondary);

}

.axisdle-stat-grid{

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;

}

.axisdle-stat-grid div{

    display:grid;
    gap:3px;

}

.axisdle-stat-grid strong{

    font-family:"Cinzel", serif;
    font-size:1.3rem;

}

.axisdle-stat-grid span{

    color:var(--text-muted);
    font-size:.72rem;
    text-transform:uppercase;

}

@keyframes axisdle-letter-in{

    from{ transform:scale(.86); }
    to{ transform:scale(1); }

}

@media (max-width:560px){

    .axisdle-page{

        padding:112px 12px 42px;

    }

    .axisdle-panel{

        padding:26px 12px;
        border-radius:var(--radius-medium);

    }

    .axisdle-board{

        width:min(315px, 100%);

    }

    .axisdle-keyboard-row{

        gap:4px;

    }

    .axisdle-key{

        min-width:0;
        height:44px;
        padding:0;
        flex:1;
        font-size:.72rem;

    }

    .axisdle-key--wide{

        flex:1.5;
        font-size:.62rem;

    }

}