/* WordlyPlay — login + sign-up pages (2026-10-27)
   Desktop: a small board that types and solves a word, next to the form card.
   Phone: one row of tiles on top, then Google, then the form — all on the first screen. */

.au {
    --au-tile: 34px;
    position: relative;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
    padding: var(--space-lg) var(--space-md) var(--space-2xl);
    display: grid;
    align-content: start;
    justify-items: center;
    overflow: hidden;
}
.au::before {   /* two soft glows behind everything */
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(520px 420px at 12% 8%, var(--accent-primary-light), transparent 70%),
        radial-gradient(460px 380px at 92% 92%, var(--correct-light), transparent 70%);
}
.au__in {
    position: relative;
    width: 100%;
    max-width: 440px;
    display: grid;
    gap: var(--space-lg);
}

/* ---------------------------------------------------------------- the board */
.au-show { display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.au-board { display: grid; gap: 6px; }
.au-row { display: grid; grid-template-columns: repeat(5, var(--au-tile)); gap: 6px; }
.au-row:not(.au-row--last) { display: none; }          /* phone: only the answer row */
.au-t {
    width: var(--au-tile); height: var(--au-tile);
    display: grid; place-items: center;
    border-radius: calc(var(--au-tile) * .22);
    font-family: var(--font-heading);
    font-size: calc(var(--au-tile) * .5);
    line-height: 1;
    color: #fff;
    background: var(--tile-empty-bg);
    border: 2px solid var(--tile-empty-border);
    text-transform: uppercase;
    transform-style: preserve-3d;
}
.au-t.is-typed { border-color: var(--accent-primary); color: var(--text-primary); animation: au-pop .12s ease-out; }
.au-t.c, .au-t.p, .au-t.a { color: #fff; border-color: transparent; }
.au-t.c { background: linear-gradient(135deg, var(--correct), var(--correct-to)); box-shadow: 0 3px 0 var(--correct-shadow); }
.au-t.p { background: linear-gradient(135deg, var(--present), var(--present-to)); box-shadow: 0 3px 0 var(--present-shadow); }
.au-t.a { background: linear-gradient(135deg, var(--absent), var(--absent-to)); box-shadow: 0 3px 0 var(--absent-shadow); }
.au-t.is-flip { animation: au-flip .42s ease-in-out both; }
.au-row.is-win .au-t { animation: au-hop .5s ease-out both; }
.au-row.is-win .au-t:nth-child(2) { animation-delay: .07s; }
.au-row.is-win .au-t:nth-child(3) { animation-delay: .14s; }
.au-row.is-win .au-t:nth-child(4) { animation-delay: .21s; }
.au-row.is-win .au-t:nth-child(5) { animation-delay: .28s; }
@keyframes au-pop { 50% { transform: scale(1.12); } }
@keyframes au-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes au-hop { 40% { transform: translateY(-8px); } 70% { transform: translateY(2px); } }

.au-show__title, .au-perks { display: none; }        /* desktop only */

/* ---------------------------------------------------------------- the card */
.au-card {
    background: var(--glass-bg-strong, var(--bg-card));
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 18px 48px -24px rgba(15, 23, 42, .35);
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* long fields or text never widen the card */
    gap: var(--space-md);
    min-width: 0;
}
.au-card form > *, .au-two > * { min-width: 0; }
.au-card .input-group__input { width: 100%; min-width: 0; box-sizing: border-box; }
.au-card__head { text-align: center; display: grid; gap: 6px; }
.au-card__title { font-family: var(--font-heading); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2rem); line-height: 1.1; color: var(--text-primary); margin: 0; text-wrap: balance; }
.au-card__sub { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; text-wrap: balance; }

.au-card .g-wrap { margin: 0; }
.au-card form { display: grid; gap: var(--space-md); }
.au-card .input-group { margin: 0; }
.au-card .input-group__label { font-weight: 700; }
.au-card .input-group__input { min-height: 48px; }
.au-hint { color: var(--text-tertiary); font-size: var(--text-xs); margin-top: 4px; }
.au-two { display: grid; gap: var(--space-md); }
.au-forgot { justify-self: end; margin-top: -13px; margin-bottom: -7px; padding: 7px 0; font-size: var(--text-xs); color: var(--text-tertiary); text-decoration: none; }
.au-forgot:hover { color: var(--accent-primary); }
.au-err { text-align: center; display: none; }

.au-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.au-check input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--accent-primary); flex-shrink: 0; cursor: pointer; }
.au-check a { color: var(--accent-primary); }

.au-card .btn--gradient { min-height: 50px; font-size: var(--text-base); }

.au-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: var(--text-xs); color: var(--text-secondary); font-weight: 700; }
.au-chips span { white-space: nowrap; }

.au-foot { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--border-color); text-align: center; font-size: var(--text-sm); color: var(--text-secondary); }
.au-foot a { color: var(--accent-primary); font-weight: 700; text-decoration: none; padding: 7px 0; }
.au-foot a:hover { text-decoration: underline; }
.au-guest { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: var(--radius-full); border: 1px solid var(--border-color); color: var(--text-primary) !important; text-decoration: none !important; font-weight: 700; }
.au-guest:hover { border-color: var(--accent-primary); background: var(--accent-primary-light); }

/* very narrow phones */
@media (max-width: 360px) {
    .au { --au-tile: 30px; padding-inline: 10px; }
    .au-card { padding: var(--space-lg) var(--space-md); }
}

/* tablets: room for two fields side by side */
@media (min-width: 560px) {
    .au-two { grid-template-columns: 1fr 1fr; }
}

/* desktop: board + perks on the left, card on the right */
@media (min-width: 920px) {
    .au { --au-tile: 50px; align-content: center; padding: var(--space-2xl) var(--space-xl); }
    .au__in { max-width: 1000px; grid-template-columns: minmax(0, 1fr) 460px; gap: clamp(32px, 5vw, 72px); align-items: center; }
    .au-show { justify-items: start; text-align: left; gap: var(--space-lg); align-self: center; }
    .au-row:not(.au-row--last) { display: grid; }
    .au-show__title { display: block; margin: 0; font-family: var(--font-heading); font-size: clamp(2rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.1; color: var(--text-primary); text-wrap: balance; max-width: 16ch; }
    .au-perks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
    .au-perks li { display: flex; align-items: center; gap: 12px; font-size: var(--text-base); color: var(--text-secondary); font-weight: 600; }
    .au-perks b { color: var(--text-primary); }
    .au-perks i { font-style: normal; width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--accent-primary-light); font-size: 18px; }
    .au-card { padding: var(--space-xl) var(--space-xl); }
    .au-chips { display: none; }
}

/* short laptop screens (Chromebooks): smaller board, tighter card */
@media (min-width: 920px) and (max-height: 720px) {
    .au { --au-tile: 40px; padding-block: var(--space-lg); }
    .au-card { padding-block: var(--space-lg); gap: 12px; }
    .au-card form { gap: 12px; }
    .au-card .input-group__input { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .au-t, .au-row.is-win .au-t { animation: none !important; }
}

/* "or use your email" divider (lines on both sides, no background patch, so it sits well on the glass card) */
.au .auth-card__or { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.au .auth-card__or::before, .au .auth-card__or::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.au .auth-card__or span { background: none; padding: 0; position: static; }