.page-level-wordle {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    min-height: calc(100vh - 5rem);
    padding: 3rem 1.5rem;
    background: radial-gradient(circle at top, #28233a 0, var(--color-background) 38rem);
}

.wordle-shell {
    width: min(100%, 48rem);
    margin: 0 auto;
}

.wordle-header {
    background: transparent;
    color: #fff;
    height: auto;
    min-height: 0;
    padding: 0 0 1.5rem;
    position: static;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.wordle-kicker, .result-label, .wordle-hint span {
    color: #e3a84d;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.wordle-header h1 {
    margin: .35rem 0 .75rem;
    font-size: clamp(2.6rem, 8vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: 0;
    color: #fff;
}

.wordle-header h1::before, .wordle-header h1::after { display: none; }

.wordle-subtitle { color: #aaa7b3; margin: 0; font-size: .98rem; line-height: 1.45; letter-spacing: 0; }
.wordle-stats { display: grid; grid-template-columns: repeat(2, max-content); gap: .25rem 1rem; text-align: right; color: #aaa7b3; padding-top: .65rem; }
.wordle-stats strong { color: #fff; font-size: 1.3rem; }
.wordle-stats span { font-size: .75rem; }

.wordle-board { display: flex; flex-direction: column; gap: .55rem; align-items: center; margin: 2.25rem 0 2.5rem; }
.wordle-row { display: flex; gap: .45rem; justify-content: center; max-width: 100%; min-height: 3.2rem; }
.wordle-tile { width: 3.2rem; height: 3.2rem; border: 2px solid #494652; display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: #fff; text-transform: uppercase; background: rgba(255, 255, 255, .015); transition: transform .18s ease, background-color .18s ease; }
.wordle-tile:not(:empty) { animation: tile-in .2s ease both; }
.wordle-tile.correct { background: #368653; border-color: #368653; }
.wordle-tile.present { background: #b4862f; border-color: #b4862f; }
.wordle-tile.absent { background: #3a3940; border-color: #3a3940; }

.wordle-form { padding: 1.35rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: .55rem; background: rgba(28, 26, 34, .7); }
.wordle-form label { display: block; margin-bottom: .65rem; font-weight: 700; color: #f4f1f7; }
.wordle-input-line { display: flex; gap: .6rem; }
.wordle-input-line input { min-width: 0; flex: 1; border: 1px solid #5a5665; background: #17161c; color: #fff; padding: .9rem 1rem; border-radius: .35rem; font: inherit; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.wordle-input-line input:focus { border-color: #e3a84d; box-shadow: 0 0 0 3px rgba(227, 168, 77, .16); }
.wordle-input-line button, .wordle-result button, .wordle-reset { border: 0; border-radius: .35rem; padding: .85rem 1.1rem; background: #e3a84d; color: #19161d; cursor: pointer; font-weight: 800; }
.wordle-input-line button:disabled { opacity: .45; cursor: not-allowed; }
.wordle-notice, .wordle-message { color: #d7d3df; margin-top: .7rem; }
.wordle-message { text-align: center; padding: 4rem 0; }
.wordle-message.error { color: #ed8b8b; }

.wordle-hint { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 1.5rem; padding: 1.25rem 0 0; color: #d7d3df; }
.wordle-result { margin-top: 2rem; padding: 2rem 1.75rem; border: 1px solid #63505a; border-radius: .55rem; background: rgba(28, 26, 34, .8); text-align: center; }
.wordle-result.won { border-color: #368653; }
.wordle-result .result-label { margin: 0 0 .6rem; }
.wordle-result h2 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.5rem); line-height: 1.2; letter-spacing: 0; }
.wordle-result h2::before, .wordle-result h2::after { display: none; }
.wordle-result p:not(.result-label) { color: #aaa7b3; margin: .65rem 0 0; line-height: 1.4; }
.wordle-result button { margin-top: 1.25rem; }
.wordle-reset { display: block; margin: 1rem auto 0; }

@keyframes tile-in {
    from { transform: scale(.86); opacity: .25; }
    to { transform: scale(1); opacity: 1; }
}

@media (max-width: 520px) {
    .page-level-wordle { padding: 2rem 1rem; }
    .wordle-header { flex-direction: column; gap: 1rem; }
    .wordle-stats { text-align: left; }
    .wordle-tile { width: min(10vw, 2.8rem); height: min(10vw, 2.8rem); }
    .wordle-form { padding: 1rem; }
    .wordle-hint { align-items: flex-start; flex-direction: column; gap: .45rem; }
}