/* Account pages, plus privacy, feedback and unsubscribe.
 *
 * Tokens, header, footer and buttons are the homepage's, so these pages read
 * as part of the site rather than as an appendix to it. What stays different
 * is the body: one narrow column with one job, because every page here is a
 * single form or a single answer. */

:root {
    --bg: #f5f4ef;
    --surface: #ffffff;
    --ink: #102c2b;
    --muted: #6a7773;
    --line: rgba(16, 44, 43, .14);
    --coral: #ff6046;
    --coral-deep: #e94b33;
    --aqua: #26b8ae;
    --blue: #3d65e6;
    --yellow: #ffd457;
    --dark: #102725;
    --bad: #c2341f;
    --max: 1480px;
    --shadow: 0 30px 80px rgba(18, 37, 34, .16);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    background: var(--bg);
    font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* The homepage's paper grain, so the background is the same background. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .42;
    pointer-events: none;
    background-image: radial-gradient(rgba(16, 44, 43, .09) .7px, transparent .7px);
    background-size: 8px 8px;
    mask-image: linear-gradient(#000, transparent 72%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
.wrap { width: min(calc(100% - 56px), var(--max)); margin-inline: auto; }

/* --- header ------------------------------------------------------------ */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(16, 44, 43, .08);
    background: rgba(245, 244, 239, .88);
    backdrop-filter: blur(18px) saturate(1.3);
}

.nav { min-height: 76px; display: flex; align-items: center; gap: 34px; }

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.055em;
    white-space: nowrap;
}
.logo-name { display: inline-flex; align-items: baseline; }
.logo-name strong { color: inherit; font: inherit; }
.logo-name em { margin-left: 3px; color: var(--coral); font: 700 11px "DM Sans", sans-serif; letter-spacing: -.01em; }

.logo-dice {
    --pip: 6px;
    width: 33px;
    height: 33px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
    gap: 2px;
    padding: 5px;
    border-radius: 10px;
    background: var(--ink);
    transform: rotate(-8deg);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16);
}
.logo-dice i { width: var(--pip); height: var(--pip); border-radius: 50%; }
.logo-dice i:nth-child(3n+1) { background: var(--yellow); }
.logo-dice i:nth-child(3n+2) { background: var(--coral); }
.logo-dice i:nth-child(3n+3) { background: var(--aqua); }

.nav-menu { display: flex; align-items: center; gap: 22px; margin-left: 18px; }
.nav-menu a { font-size: 15px; font-weight: 700; color: #37514f; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* --- page --------------------------------------------------------------- */

.page {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 96px);
}

.card {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border-radius: 28px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: clamp(26px, 5vw, 40px);
}

.card.wide { max-width: 840px; }

h1 {
    margin: 0 0 10px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(32px, 4.4vw, 44px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

h2 {
    margin: 36px 0 12px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    letter-spacing: -.035em;
}

.intro {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 16px;
}

/* --- forms -------------------------------------------------------------- */

label {
    display: block;
    margin: 18px 0 7px;
    font-size: 14px;
    font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    font: inherit;
    font-size: 16px;   /* 16px stops iOS zooming the page on focus */
    color: var(--ink);
    background: #fbfbf9;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}

textarea {
    resize: vertical;
    min-height: 150px;
    line-height: 1.55;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--aqua);
    box-shadow: 0 0 0 3px rgba(38, 184, 174, .18);
}

.hint { margin: 7px 0 0; font-size: 13.5px; color: var(--muted); }

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 0;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--muted);
}
.check input { margin-top: 4px; }

.button {
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    /* A two-word label breaking across lines turns a pill into a lozenge, and
       the header runs out of room before anything else does. */
    white-space: nowrap;
    cursor: pointer;
}

.button-primary { color: #fff; background: var(--coral); box-shadow: 0 8px 26px rgba(255, 96, 70, .3); }
.button-primary:hover { background: var(--coral-deep); }
.button-ghost { border: 1px solid var(--line); background: rgba(255, 255, 255, .6); color: var(--ink); }
.button-ghost:hover { background: #fff; }

/* Outside a form the quiet button needs its own rules: the ones below are
   scoped to `form > .button`, where full width is right and here it is not. */
.button-quiet { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.button-quiet:hover { background: #f3f2ee; }

/* Forms get a full-width primary button: on a one-job page there is nothing
   for it to sit beside. */
form > .button {
    width: 100%;
    margin-top: 26px;
    color: #fff;
    background: var(--coral);
    box-shadow: 0 8px 26px rgba(255, 96, 70, .3);
    transition: background .15s, transform .1s;
}
form > .button:hover { background: var(--coral-deep); }
form > .button:active { transform: translateY(1px); }

form > .button-quiet {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    box-shadow: none;
}
form > .button-quiet:hover { background: #f3f2ee; }

.sign-out { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.sign-out > .button { margin-top: 0; }

/* On the settings page each section is its own form, so the rule above would
   leave a full-width button stacked under every one of them. They stay quiet
   and hug their content instead. */
.card.wide form > .button-quiet { width: auto; }

.alt {
    margin: 20px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--muted);
}
.alt a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* --- messages ----------------------------------------------------------- */

.notice {
    margin: 0 0 20px;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 15px;
    background: #f3f2ee;
    border: 1px solid var(--line);
}
.notice a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.notice-bad  { background: #fdeceb; color: var(--bad); border-color: #f4c9c3; }
.notice-good { background: #e8f7f5; color: #0d6b63; border-color: #bfe6e1; }

.field-error {
    display: block;
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--bad);
}

/* --- profile ------------------------------------------------------------ */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 6px 0 8px;
}
.stat {
    padding: 16px 18px;
    background: #fbfbf9;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.stat b {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.04em;
}
.stat span { font-size: 13px; color: var(--muted); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Label-and-value rather than columns of data: the header is the row's first
   cell, so it needs its own width and the value needs room to wrap. */
.detail th { width: 40%; vertical-align: top; }
.detail td { white-space: normal; word-break: break-word; }

.muted { color: var(--muted); }
.empty { color: var(--muted); font-size: 15.5px; }
.empty a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    background: #eef0ee;
    color: var(--muted);
}
.pill-win { background: #e8f7f5; color: #0d6b63; }

/* --- the hub (the signed-in home) --------------------------------------- */

/* Every other page here is one column with one job, and the card layout above
   is right for those. This page is the exception: it is where you land after
   playing, so it is full width, and the account admin sits in the rail rather
   than at the top where it would be the first thing you read about yourself. */

.hub {
    flex: 1;
    padding: clamp(22px, 3vw, 40px) 0 clamp(46px, 6vw, 88px);
}

.hub-top {
    margin-bottom: clamp(20px, 2.4vw, 30px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 26px;
}

.hub-greeting h1 { margin: 0; font-size: clamp(36px, 5vw, 60px); }
.hub-greeting p { margin: 6px 0 0; color: var(--muted); font-size: 17px; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hub .notice { margin-bottom: 18px; }

/* Four numbers, four colours. The palette is doing the work the size of the
   type used to do alone. */
.hub-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.tile {
    min-height: 138px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 24px;
}

.tile b {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.05em;
}

.tile span { font-size: 14px; font-weight: 700; }

.tile-ink    { background: var(--dark);   color: #fff; }
.tile-coral  { background: var(--coral);  color: #fff; box-shadow: 0 14px 34px rgba(255, 96, 70, .22); }
.tile-aqua   { background: var(--aqua);   color: #fff; }
.tile-yellow { background: var(--yellow); color: var(--ink); }
.tile-ink span, .tile-aqua span, .tile-coral span { color: rgba(255, 255, 255, .82); }
.tile-yellow span { color: rgba(16, 44, 43, .68); }

.hub-section { margin-top: clamp(26px, 3vw, 42px); }

/* The catalogue, which is the only reason anybody opens this page. Starting
   used to be one button at the top that had to guess which game you meant; each
   card now has its own, and the ways into that game are in the dialog. */
.pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 16px;
}

.pick-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #faf9f5;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(16, 44, 43, .05);
}

/* The one you can actually play right now. */
.pick-card.is-playable {
    background: var(--surface);
    border-color: rgba(255, 96, 70, .45);
    box-shadow: 0 16px 40px rgba(255, 96, 70, .13);
}

.pick-art { position: relative; flex: 0 0 auto; aspect-ratio: 16 / 10; overflow: hidden; background: #d9d7ce; }
.pick-art img { width: 100%; height: 100%; object-fit: cover; }

/* A game with no code behind it is dimmed rather than hidden: the catalogue is
   part of the pitch, and a grid of four would read as a smaller site. */
.pick-card:not(.is-playable) .pick-art { opacity: .62; }

.pick-flag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(16, 39, 37, .88);
    color: #fff;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.pick-body { flex: 1; padding: 17px 18px 18px; display: flex; flex-direction: column; }
.pick-body h3 {
    margin: 0 0 4px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.04em;
}

.pick-meta { margin: 0 0 14px; color: var(--muted); font-size: 14px; font-weight: 700; }
.pick-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.pick-actions .button { min-height: 44px; padding: 0 17px; font-size: 15px; }
.pick-other { margin: 11px 0 0; color: var(--muted); font-size: 13.5px; }
.pick-other a { text-decoration: underline; text-underline-offset: 3px; }
.pick-soon { margin: auto 0 0; color: var(--muted); font-size: 14.5px; }

.hub-cols {
    margin-top: clamp(26px, 3vw, 42px);
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, .9fr);
    gap: clamp(14px, 1.6vw, 22px);
    align-items: start;
}

.hub h2 {
    margin: 0 0 14px;
    font-size: clamp(21px, 2vw, 27px);
}

/* A played game is a thing with a picture, not a row in a spreadsheet. The
   table this replaced had to be scrolled sideways on a phone to reach the
   result, which is the one column anybody came for. */
.hub-games { display: grid; gap: 12px; }

/* The min-height keeps a row without a Play again button — a game in the
   catalogue that cannot be opened yet — the same height as one with it. */
.play-row {
    min-height: 108px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 17px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.play-art {
    flex: 0 0 auto;
    width: 132px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: #d9d7ce;
}
.play-art img { width: 100%; height: 100%; object-fit: cover; }

.play-body { min-width: 0; flex: 1; }
.play-body h3 {
    margin: 0 0 3px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.035em;
}

.play-meta { margin: 0; color: var(--muted); font-size: 14.5px; }
.play-end { margin: 9px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.play-date { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.play-again { flex: 0 0 auto; min-height: 42px; padding: 0 18px; font-size: 15px; }

.hub-empty {
    padding: clamp(26px, 3vw, 40px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
}
.hub-empty p { margin: 0 0 8px; color: var(--muted); font-size: 16px; }
.hub-empty strong { color: var(--ink); font-size: 18px; }
.hub-empty .button { margin-top: 14px; }

/* --- settings (full width, same furniture as the hub) -------------------- */

/* The facts you only ever read, in one strip, so none of them takes up a card
   that a thing you can actually change could have had. */
.set-summary {
    padding: 18px 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px 30px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.set-summary b {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}
.set-summary span { color: var(--muted); font-size: 13.5px; }
.set-summary span a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.set-ok { color: #0d6b63; }
.set-todo { color: var(--muted); }

.set-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

.set-card {
    padding: clamp(20px, 2vw, 27px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
}

.set-card h2 { margin: 0 0 6px; font-size: 21px; }
.set-lede { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

.set-signout {
    margin-top: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}
.set-signout p { max-width: 720px; margin: 0; color: var(--muted); font-size: 14.5px; }
.set-signout b { display: block; color: var(--ink); font-size: 17px; font-family: "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.set-signout form > .button { width: auto; margin: 0; min-height: 44px; padding: 0 22px; font-size: 15px; }

/* Deleting an account is not a setting, so it does not get a card among the
   settings. It sits at the end in its own tinted panel: far enough from the
   save buttons that nobody arrives here by accident, plain enough that nobody
   has to hunt for it either. Red is on the button alone — a whole panel of
   alarm colour reads as a warning about the page rather than about the act. */
.set-danger {
    margin-top: 16px;
    padding: clamp(20px, 2vw, 27px);
    background: #fdeceb;
    border: 1px solid #f4c9c3;
    border-radius: 22px;
}
.set-danger h2 { margin: 0 0 6px; font-size: 21px; color: var(--bad); }
.set-danger .set-lede { max-width: 760px; color: #7d3527; }

.set-danger-fields {
    margin-top: 18px;
    display: grid;
    gap: 8px 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 620px;
}
.set-danger-fields label { margin-top: 0; }
.set-danger input { background: #fff; border-color: #e7b7af; }

.set-danger form > .button-danger {
    width: auto;
    margin-top: 20px;
    min-height: 44px;
    padding: 0 22px;
    font-size: 15px;
    color: #fff;
    background: var(--bad);
    box-shadow: none;
}
.set-danger form > .button-danger:hover { background: #a52a17; }

/* Each card is its own form, so the full-width primary button that suits a
   one-job page would put a coral bar across all four of them. */
.set-card form > .button {
    width: auto;
    margin-top: 20px;
    min-height: 44px;
    padding: 0 20px;
    font-size: 15px;
}

/* The rail is what makes this a hub rather than a report: it is the only part
   of the page that points forward. */
.hub-rail { display: grid; gap: 14px; }

.rail-card {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
}
.rail-card h2 { margin: 0 0 13px; font-size: 18px; }

.rail-resume { background: var(--dark); border-color: transparent; color: #fff; }
.rail-resume .button { width: 100%; margin-top: 15px; }
.resume-body { display: flex; align-items: center; gap: 13px; }
.resume-art { flex: 0 0 auto; width: 86px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 11px; }
.resume-body strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: -.03em; }
.resume-body span { color: rgba(255, 255, 255, .64); font-size: 14px; }

.rail-stars { background: var(--yellow); border-color: rgba(16, 44, 43, .16); }
.rail-stars b {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.05em;
}
.rail-stars p { margin: 9px 0 0; color: rgba(16, 44, 43, .72); font-size: 14.5px; line-height: 1.45; }

.rail-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 15px; }
.rail-facts dt { color: var(--muted); }
.rail-facts dd { margin: 0; overflow-wrap: anywhere; }

.rail-confirmed, .rail-unconfirmed { margin: 14px 0 0; font-size: 14.5px; font-weight: 700; }
.rail-confirmed { color: #0d6b63; }
.rail-confirmed::before { content: "✓ "; }
.rail-unconfirmed { color: var(--muted); font-weight: 400; }
.rail-unconfirmed a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.rail-card .check { margin-top: 16px; font-size: 14.5px; }
.rail-buttons { margin-top: 15px; display: flex; align-items: center; gap: 9px; }
.rail-buttons .button { min-height: 42px; padding: 0 20px; font-size: 15px; }
/* The logout form is only here to carry its CSRF token; it must not become a
   block that pushes its button onto a line of its own. Its button also has to
   opt out of the full-width `form > .button` rule, which is right on a
   single-job page and wrong in a row of two. */
.rail-buttons form { display: contents; }
.rail-buttons form > .button { width: auto; margin-top: 0; }

/* --- footer ------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { min-height: 120px; display: flex; align-items: center; gap: 32px; }
.footer-links { margin-left: auto; display: flex; gap: 22px; color: var(--muted); font-size: 15px; font-weight: 600; }
.footer-note { color: #78837f; font-size: 14px; }

/* --- prose (privacy policy) --------------------------------------------- */

.prose h2 { margin-top: 34px; }
.prose p, .prose li { color: #24413f; font-size: 16px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prose code { background: #f3f2ee; padding: 1px 5px; border-radius: 5px; font-size: 14px; }
.prose .updated { color: var(--muted); font-size: 14px; }

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 1100px) {
    /* The rail below the games rather than beside them: at this width a third
       of the page is too narrow for the account card to stay readable. */
    .hub-cols { grid-template-columns: minmax(0, 1fr); }
    .hub-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .rail-card { align-self: stretch; }
}

@media (max-width: 900px) {
    .nav-menu { display: none; }
    .hub-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .wrap { width: calc(100% - 32px); }
    .nav { min-height: 68px; gap: 12px; }
    .card { border-radius: 22px; }
    .footer-inner { padding: 30px 0; flex-direction: column; align-items: flex-start; gap: 18px; }
    .footer-links { margin: 0; flex-wrap: wrap; }

    .hub-rail { grid-template-columns: minmax(0, 1fr); }
    .hub-actions { width: 100%; }
    .hub-actions .button { flex: 1; }
    .tile { min-height: 112px; padding: 16px 18px; border-radius: 20px; }

    /* The cover stays, smaller: it is what makes the row recognisable at a
       glance, and dropping it would leave the same grey list as before. */
    .play-row { flex-wrap: wrap; gap: 13px; }
    .play-art { width: 96px; border-radius: 12px; }
    .play-again { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}