/* Awful Answers. Base look-and-feel classes (.btn, .card, inputs, .error, .muted) come from the shared site stylesheet. */

.aa-page {
    --aa-bg: #141417; --aa-panel: #1f1f25; --aa-line: #34343d; --aa-ink: #f5f5f7; --aa-accent: #ff3b5c; --aa-gold: #ffcc33;
    --aa-black: #0c0c0e; --aa-white: #fff; --aa-good: #2eb872;
    min-height: 100vh; background: var(--aa-bg); color: var(--aa-ink);
}
.aa-page .card { background: var(--aa-panel); }
.aa-page .btn { background: var(--aa-accent); color: #fff; }
.aa-page .btn.small { background: #3a3a45; }
.aa-page .btn.small.active { background: var(--aa-gold); color: #000; }
.aa-page .btn.danger, .aa-page .btn.small.danger { background: #b3261e; color: #fff; }
.aa-page .logo { color: var(--aa-white); text-shadow: 3px 3px 0 var(--aa-accent); }
:where(.aa-page a) { color: var(--aa-gold); }

/* ---- Cards ---- */
.aa-card {
    container-type: inline-size; position: relative; aspect-ratio: 5 / 7; border-radius: .9rem; overflow: hidden;
    display: flex; flex-direction: column; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left;
    box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .55);
}
.aa-card.black { background: var(--aa-black); color: #fff; border: 1px solid #2a2a30; }
.aa-card.white { background: var(--aa-white); color: #111; }
.aa-card-text { margin: 0; padding: 9cqw 9cqw 0; font-size: 10cqw; line-height: 1.22; font-weight: 800; overflow-wrap: anywhere; }
.aa-card-text.md { font-size: 8cqw; }
.aa-card-text.lg { font-size: 6.4cqw; }
.aa-card-text.xl { font-size: 5cqw; }
.aa-card-text.xxl { font-size: 4.2cqw; }
.aa-brand { margin-top: auto; padding: 0 9cqw 7cqw; font-size: 5cqw; font-weight: 700; letter-spacing: .02em; opacity: .85; }
.aa-pick { position: absolute; right: 7cqw; bottom: 7cqw; font-size: 5.5cqw; font-weight: 800; background: #fff; color: #000; border-radius: 50cqw; padding: 1cqw 4cqw; }
.aa-blank { display: inline-block; min-width: 3.2em; border-bottom: .1em solid currentColor; }
/* The cards played into the blanks are just underlined, which stays readable when they wrap over several lines. */
.aa-filled { text-decoration: underline; text-decoration-color: var(--aa-accent); text-decoration-thickness: .1em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
.aa-card.back { align-items: center; justify-content: center; background: #fff; color: #111; }
.aa-card.back .aa-card-text { padding: 0 10cqw; text-align: center; font-size: 11cqw; }

/* ---- Lobby, shared page layout ---- */
.aa-home { max-width: 52rem; margin: 0 auto; padding: 2rem 1rem; }
.aa-center { text-align: center; }
.deck-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.deck-tools .btn.small { margin: 0; }
.deck-tools input { flex: 1; min-width: 10rem; margin: 0; }
.deck-groups details { border: 1px solid var(--aa-line); border-radius: .6rem; margin: .5rem 0; padding: .3rem .8rem; }
.deck-groups summary { cursor: pointer; font-weight: 700; padding: .4rem 0; }
.deck-row { display: flex; gap: .6rem; align-items: center; padding: .3rem 0; border-top: 1px solid var(--aa-line); }
.deck-row label { flex: 1; font-weight: 400; margin: 0; display: flex; align-items: center; }
.deck-row .counts { opacity: .65; font-size: .85rem; white-space: nowrap; }
.deck-row .tag { background: #3a3a45; border-radius: .4rem; padding: .05rem .4rem; font-size: .75rem; }
.totals { font-weight: 700; margin: .6rem 0; }

/* ---- Host screen ---- */
.aa-host { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.aa-host-main { flex: 1; padding: 1rem 1.5rem; display: flex; flex-direction: column; }
.aa-lobby { margin: auto; text-align: center; width: 100%; max-width: 70rem; position: relative; z-index: 1; }
.aa-lobby .lobby-hint { font-size: 1.6rem; }
.aa-lobby .lobby-row { display: flex; gap: 3rem; justify-content: center; align-items: center; margin: 1rem 0; }
.aa-lobby .qr { width: 16rem; background: #fff; padding: .5rem; border-radius: .5rem; }
.aa-lobby .qr svg { width: 100%; height: auto; display: block; }
.aa-lobby .room-code { font-size: 8rem; font-weight: 900; letter-spacing: .6rem; color: var(--aa-gold); }
.aa-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1rem 0; }
.aa-chip { background: var(--aa-panel); padding: .5rem 1.1rem; border-radius: 2rem; font-size: 1.4rem; border: 2px solid transparent; }
.aa-chip.done { border-color: var(--aa-good); }
.aa-chip .x { margin-left: .5rem; background: none; border: 0; color: #ff8a8a; cursor: pointer; font-size: 1.1rem; }

.aa-round { flex: 1; display: grid; grid-template-columns: minmax(12rem, 22vw) 1fr; gap: 2rem; align-items: start; }
.aa-round .aa-prompt { --cw: min(22vw, 26rem); width: var(--cw); position: sticky; top: 1rem; }
.aa-round .aa-prompt .aa-card { width: 100%; }
.aa-status { text-align: center; font-size: 1.6rem; margin: 0 0 .8rem; }
.aa-status strong { color: var(--aa-gold); }
.aa-sentence { font-size: clamp(1.4rem, 2.6vw, 2.6rem); font-weight: 800; text-align: center; margin: .5rem auto 1rem; max-width: 60rem; }
.aa-host-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1rem 0; }
.aa-host-actions .btn { margin: 0; }

/* The table the played cards land on */
.aa-table { --cw: clamp(7.5rem, 11.5vw, 14rem); --slot: calc(var(--cw) + 1.6rem); display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; align-items: flex-start; perspective: 1400px; padding: 1rem 0 2rem; min-height: 14rem; }
.aa-entry { animation: aa-fly-in .75s cubic-bezier(.2, .9, .3, 1) both; transform: rotate(var(--tilt, 0deg)); }
.aa-entry-inner { display: flex; flex-direction: column; align-items: center; gap: .6rem; position: relative; z-index: var(--i, 0); }
.aa-stack { display: flex; }
.aa-stack .aa-flip + .aa-flip { margin-left: calc(var(--cw) * -.78); }
.aa-stack .aa-flip:nth-child(2) { transform-origin: bottom left; }
.aa-flip { position: relative; width: var(--cw); aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .3, 1); }
.aa-flip.up { transform: rotateY(180deg); }
.aa-flip .aa-card { position: absolute; inset: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.aa-flip .front { transform: rotateY(180deg); }
.aa-entry-name { margin: 0; font-size: 1.2rem; font-weight: 700; background: var(--aa-panel); border-radius: 2rem; padding: .2rem .9rem; }
.aa-entry.winner .aa-card.front { box-shadow: 0 0 0 .35rem var(--aa-gold), 0 0 2.5rem rgba(255, 204, 51, .8); }
.aa-entry.winner .aa-entry-name { background: var(--aa-gold); color: #000; }
.aa-entry.loser { opacity: .75; }

@keyframes aa-fly-in {
    from { transform: translateY(-120vh) rotate(calc(var(--tilt, 0deg) - 35deg)) scale(.5); opacity: 0; }
    60%  { opacity: 1; }
    to   { transform: rotate(var(--tilt, 0deg)); opacity: 1; }
}

/* Shuffle: gather into a pile, riffle, then fan back out in the new order. */
.aa-table.shuffling .aa-entry-inner {
    animation: aa-shuffle 2.5s ease-in-out both;
    --pile: calc((var(--n) - 1) / 2 - var(--i));
}
@keyframes aa-shuffle {
    0%   { transform: translateX(0) rotate(0); }
    22%  { transform: translateX(calc(var(--pile) * var(--slot))) rotate(var(--r, 4deg)); }
    32%  { transform: translateX(calc(var(--pile) * var(--slot) - 3rem)) translateY(-1rem) rotate(calc(var(--r, 4deg) * -2)); }
    42%  { transform: translateX(calc(var(--pile) * var(--slot) + 3rem)) translateY(.6rem) rotate(calc(var(--r, 4deg) * 2)); }
    52%  { transform: translateX(calc(var(--pile) * var(--slot) - 2rem)) translateY(-.6rem) rotate(calc(var(--r, 4deg) * -1)); }
    62%  { transform: translateX(calc(var(--pile) * var(--slot) + 2rem)) rotate(var(--r, 4deg)); }
    72%  { transform: translateX(calc(var(--pile) * var(--slot))) rotate(0); }
    100% { transform: translateX(0) rotate(0); }
}

.aa-scoreboard { position: sticky; bottom: 0; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .7rem 1rem; background: #000; z-index: 5; }
.aa-score { background: var(--aa-panel); border-radius: .5rem; padding: .35rem .9rem; display: flex; gap: .7rem; align-items: center; font-size: 1.15rem; }
.aa-score strong { color: var(--aa-gold); }
.aa-score.czar { outline: 2px solid var(--aa-gold); }
.aa-score .played { color: var(--aa-good); }
.aa-score .x { background: none; border: 0; color: #ff8a8a; cursor: pointer; font-size: 1rem; }
.aa-score-actions { margin-left: auto; display: flex; gap: .5rem; }
.aa-score-actions .btn { margin: 0; }
.aa-podium { list-style: none; padding: 0; font-size: 2rem; max-width: 34rem; margin: 1rem auto; position: relative; z-index: 1; }
.aa-podium li { display: flex; justify-content: space-between; background: var(--aa-panel); margin: .4rem 0; padding: .6rem 1.2rem; border-radius: .5rem; animation: aa-rise .6s ease-out both; }
.aa-podium li:nth-child(2) { animation-delay: .15s; } .aa-podium li:nth-child(3) { animation-delay: .3s; } .aa-podium li:nth-child(n+4) { animation-delay: .45s; }
.aa-podium li:first-child { background: var(--aa-gold); color: #1a1200; }
@keyframes aa-rise { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Phone ---- */
.aa-phone { width: 100%; max-width: 48rem; margin: 0 auto; padding: clamp(.8rem, 2vw, 1.6rem); font-size: clamp(1rem, .6rem + 1.4vw, 1.5rem); min-height: 100vh; display: flex; flex-direction: column; gap: .8rem; }
.aa-phone-header { display: flex; justify-content: space-between; align-items: center; gap: .6rem; background: var(--aa-panel); border-radius: .7rem; padding: .6rem 1rem; font-size: 1.15em; }
.aa-phone-header strong { color: var(--aa-gold); }
.aa-role { margin-left: .5em; font-size: .75em; background: var(--aa-gold); color: #000; border-radius: 1rem; padding: .1rem .6rem; font-weight: 800; }
.aa-note { text-align: center; opacity: .9; margin: .2rem 0; }
.aa-note strong { color: var(--aa-gold); }
.aa-prompt-mini { background: var(--aa-black); border: 1px solid #2a2a30; border-radius: .7rem; padding: .7rem .9rem; font-weight: 800; font-size: 1.05em; }
.aa-prompt-big { width: min(70vw, 22rem); margin: .5rem auto; }
.aa-chosen { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.aa-chosen span { background: #fff; color: #111; border-radius: .4rem; padding: .15rem .5rem; font-size: .8em; font-weight: 700; }

.aa-hand { isolation: isolate; position: relative; width: 100%; height: min(78vw, 30rem); margin: .4rem 0 0; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: grab; }
.aa-hand:active { cursor: grabbing; }
.aa-hand-card { position: absolute; left: 50%; top: 4%; width: min(52vw, 18rem); margin-left: calc(min(52vw, 18rem) / -2); will-change: transform; }
.aa-hand-card .aa-card { width: 100%; }
.aa-hand-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
.aa-hand-controls button { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--aa-line); background: var(--aa-panel); color: #fff; font-size: 1.4rem; cursor: pointer; }
.aa-counter { min-width: 4.5rem; text-align: center; opacity: .8; }
.aa-hint { text-align: center; opacity: .65; font-size: .85em; margin: 0; }

.aa-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; animation: aa-fade .2s ease-out; }
.aa-modal { background: var(--aa-panel); border-radius: 1rem; padding: 1.2rem; width: min(100%, 26rem); text-align: center; }
.aa-modal .aa-card { width: min(60%, 13rem); margin: .6rem auto 1rem; }
.aa-modal h2 { margin: 0; font-size: 1.3em; }
.aa-modal-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.aa-modal-actions .btn { margin: 0; flex: 1; }
@keyframes aa-fade { from { opacity: 0; } to { opacity: 1; } }

.aa-flyoff { position: fixed; left: 50%; top: 22%; width: min(52vw, 16rem); margin-left: calc(min(52vw, 16rem) / -2); z-index: 60; pointer-events: none; animation: aa-fly-off .7s cubic-bezier(.5, 0, .9, .4) forwards; }
.aa-flyoff .aa-card { width: 100%; }
@keyframes aa-fly-off {
    from { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
    to   { transform: translateY(-85vh) scale(.55) rotate(10deg); opacity: .2; }
}

.aa-revealed { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.aa-revealed .aa-pickable { background: none; border: 0; padding: 0; cursor: pointer; display: flex; justify-content: center; gap: .4rem; width: 100%; }
.aa-revealed .aa-card { width: min(44vw, 13rem); }
.aa-revealed .aa-pickable:hover .aa-card, .aa-revealed .aa-pickable:focus-visible .aa-card { box-shadow: 0 0 0 .3rem var(--aa-gold); }
.aa-revealed .aa-entry-new { animation: aa-rise .5s ease-out both; }
.aa-big-btn { font-size: 1.2em; width: 100%; }
.aa-winner-banner { text-align: center; font-size: 1.5em; font-weight: 900; color: var(--aa-gold); margin: .2rem 0; }

@media (max-width: 900px) {
    .aa-round { grid-template-columns: 1fr; }
    .aa-round .aa-prompt { position: static; margin: 0 auto; --cw: min(60vw, 20rem); }
    .aa-lobby .room-code { font-size: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .aa-entry, .aa-table.shuffling .aa-entry-inner, .aa-flyoff, .aa-modal-backdrop, .aa-podium li { animation: none; }
    .aa-flip { transition: none; }
}

/* "First to [5] points wins" on one line */
.aa-home label.points-row { display: flex; align-items: center; gap: .6rem; }
.aa-home label.points-row input { width: 5rem; margin: 0; text-align: center; }