/* gstream — "Sleeve": a record jacket. Square corners, a heavy spine, warm neutrals, and one hot accent spent only on things you can act on. Both themes come from one token block. Light is a real palette rather than an inversion: the jacket goes to card stock and the accent deepens to hold contrast on a pale ground. */ :root { --bg: #efece3; --fg: #17150f; --dim: #78725f; --line: #cec8b6; --sunk: #e5e1d4; --raised: #f7f5ee; --hot: #c4441f; --on-hot: #ffffff; --ok: #4a7a2e; --bad: #b3341c; --warn: #9a6b16; --cover: #ded9c9; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #111010; --fg: #f0ece4; --dim: #8a8378; --line: #2c2926; --sunk: #191716; --raised: #1a1817; --hot: #e2542c; --on-hot: #111010; --ok: #8fbf6a; --bad: #e2603f; --warn: #d2a13d; --cover: #1c1a18; } } /* The toggle stamps data-theme on , and it has to beat the media query in BOTH directions — so each value is declared explicitly rather than relying on one override. */ :root[data-theme="dark"] { --bg: #111010; --fg: #f0ece4; --dim: #8a8378; --line: #2c2926; --sunk: #191716; --raised: #1a1817; --hot: #e2542c; --on-hot: #111010; --ok: #8fbf6a; --bad: #e2603f; --warn: #d2a13d; --cover: #1c1a18; } :root[data-theme="light"] { --bg: #efece3; --fg: #17150f; --dim: #78725f; --line: #cec8b6; --sunk: #e5e1d4; --raised: #f7f5ee; --hot: #c4441f; --on-hot: #ffffff; --ok: #4a7a2e; --bad: #b3341c; --warn: #9a6b16; --cover: #ded9c9; } * { box-sizing: border-box; } /* The HTML `hidden` attribute is only a UA-stylesheet `display:none`, so ANY author rule that sets display beats it — `.cover{display:grid}` silently made `el.hidden = true` do nothing, leaving a full-screen overlay permanently on top of the app. Anything hidden from JS must actually hide. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--ui); font-size: 15px; line-height: 1.5; } /* -- controls ------------------------------------------------------------- */ button { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 0; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } button:hover:not(:disabled) { border-color: var(--hot); color: var(--hot); } button:disabled { opacity: 0.42; cursor: not-allowed; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; } button.primary { background: var(--hot); border-color: var(--hot); color: var(--on-hot); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 12px; } button.primary:hover:not(:disabled) { filter: brightness(1.08); color: var(--on-hot); } button.big { padding: 13px 24px; font-size: 13px; } input, select { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 0; padding: 9px 11px; font: inherit; font-size: 14px; width: 100%; } input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--hot); } input:disabled { opacity: 0.5; } .icon-btn { padding: 4px 9px; font-family: var(--mono); font-size: 12px; min-width: 38px; font-weight: 400; } .icon-btn.muted { color: var(--hot); border-color: var(--hot); } /* -- spine ---------------------------------------------------------------- */ .spine { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--raised); } .brand { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; } .cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--dim); } .cat b { color: var(--fg); letter-spacing: 0.22em; } .spacer { flex: 1; } .me { font-size: 12.5px; color: var(--dim); } .badge { font-family: var(--mono); font-size: 10.5px; padding: 4px 9px; border: 1px solid var(--line); color: var(--dim); font-variant-numeric: tabular-nums; } .badge.good { color: var(--ok); border-color: var(--ok); } .badge.ok { color: var(--warn); border-color: var(--warn); } .badge.bad { color: var(--bad); border-color: var(--bad); } .badge.mode.warn { color: var(--warn); border-color: var(--warn); } /* -- landing -------------------------------------------------------------- */ body.landing { display: grid; place-items: center; min-height: 100vh; padding: 20px; } .card { background: var(--raised); border: 1px solid var(--line); padding: 32px; width: min(430px, 100%); } .card h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; } .card .sub { margin: 6px 0 24px; color: var(--dim); font-size: 14px; } .card label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 16px 0 6px; } .card .row { margin-top: 16px; display: flex; gap: 8px; } .card .row button { flex: 1; } .divider { text-align: center; margin: 24px 0 4px; position: relative; color: var(--dim); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line); } .divider span { background: var(--raised); padding: 0 12px; position: relative; } .err { color: var(--bad); font-size: 13px; margin-top: 14px; } /* -- lobby ---------------------------------------------------------------- */ .lobby { display: grid; place-items: start center; padding: 28px 20px 60px; } .lobby-card { background: var(--raised); border: 1px solid var(--line); padding: 28px; width: min(640px, 100%); } .lobby-card h2 { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; } .lobby-sub { margin: 0 0 22px; color: var(--dim); font-size: 14px; } .lobby-card h3, .panel h3 { margin: 0 0 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); font-weight: 400; } #lobby-form label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; } #lobby-form button[type="submit"] { width: 100%; margin-top: 14px; } .lobby-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; } @media (max-width: 620px) { .lobby-cols { grid-template-columns: 1fr; } } .creator-box { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; } .cfg-row { display: flex; align-items: center; gap: 10px; } .cfg-row label { font-size: 13px; color: var(--dim); flex: 1; } .cfg-row input { width: 78px; } #start-game { width: 100%; margin-top: 14px; } /* -- layout --------------------------------------------------------------- */ .layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; padding: 20px; align-items: start; } @media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } } .stage { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 720px) { .stage { grid-template-columns: 1fr; } } .jacket-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .details-col { min-width: 0; } /* -- the jacket ----------------------------------------------------------- */ .player-wrap { aspect-ratio: 1; background: #000; border: 1px solid var(--line); position: relative; overflow: hidden; } .player-wrap iframe { width: 100%; height: 100%; display: block; } /* Opaque, and it swallows clicks so nobody can pop the video out to YouTube mid-round. Never drawn over an advertisement — see renderCover(). */ .cover { position: absolute; inset: 0; z-index: 5; background: var(--cover); display: grid; place-items: center; text-align: center; } .cover-inner { padding: 20px; } .cover-mark { font-size: 36px; color: var(--hot); line-height: 1; } .cover-text { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .cover-sub { margin-top: 6px; font-size: 12px; color: var(--dim); } /* -- now playing ---------------------------------------------------------- */ .np-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .np-title.masked { letter-spacing: 0.18em; } .np-sub { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 8px; } .np-sub.revealed { color: var(--hot); letter-spacing: 0.06em; } .progress { height: 3px; background: var(--line); margin-top: 16px; overflow: hidden; } #progress-fill { height: 100%; width: 0; background: var(--hot); transition: width 0.1s linear; } .times { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 6px; font-variant-numeric: tabular-nums; } /* -- round ---------------------------------------------------------------- */ .round-banner { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); } .round-banner .spacer { flex: 1; } .stopwatch { font-family: var(--mono); font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .round-banner.closing .stopwatch { color: var(--hot); } #round-text { font-size: 12px; color: var(--dim); } .round-banner.closing #round-text { color: var(--fg); } .round-banner.over { opacity: 0.75; } .extend-budget { font-family: var(--mono); font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; } .extend { background: var(--hot); border-color: var(--hot); color: var(--on-hot); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .extend:hover:not(:disabled) { color: var(--on-hot); filter: brightness(1.08); } /* -- volume --------------------------------------------------------------- */ .volume-row { display: flex; align-items: center; gap: 10px; } #volume { flex: 1; width: auto; } .volume-val { font-family: var(--mono); font-size: 10.5px; color: var(--dim); width: 26px; text-align: right; font-variant-numeric: tabular-nums; } /* -- guessing ------------------------------------------------------------- */ .guess-panel, .answer-panel { border: 1px solid var(--line); background: var(--sunk); padding: 13px 14px; } .guess-q { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .guess-choices { display: flex; flex-wrap: wrap; gap: 7px; } .guess-choices button { flex: 1 1 auto; min-width: 78px; } .guess-choices button.away-choice { opacity: 0.62; } .guess-choices .none { color: var(--dim); font-size: 12.5px; line-height: 1.5; } .answer-line { display: flex; align-items: baseline; gap: 9px; } .answer-line .spacer { flex: 1; } .answer-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .answer-state { font-family: var(--mono); font-size: 10.5px; color: var(--dim); } .answer-panel.settled .answer-state { color: var(--ok); } .guess-board { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); } .guess-board li { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 12.5px; } .guess-board .rank { font-family: var(--mono); font-size: 9.5px; color: var(--dim); width: 13px; } .guess-board .arrow { color: var(--dim); } /* Only ever applied once the answer is out, so it cannot tell anyone early. */ .guess-board li.right .target { color: var(--ok); font-weight: 700; } .guess-board .empty { color: var(--dim); font-size: 12.5px; } /* -- side panels ---------------------------------------------------------- */ .side { display: flex; flex-direction: column; gap: 16px; } .panel { background: var(--raised); border: 1px solid var(--line); padding: 16px; } .count { font-family: var(--mono); color: var(--dim); letter-spacing: 0.1em; } .hint { color: var(--dim); font-size: 11.5px; line-height: 1.5; margin: 9px 0 0; } .hint-tight { margin-top: -4px; margin-bottom: 10px; } .hint code { background: var(--sunk); padding: 1px 5px; font-family: var(--mono); font-size: 11px; } #submit-form { display: flex; gap: 8px; } #submit-form input { flex: 1; } .mine-list, .members, .playlist { list-style: none; margin: 0; padding: 0; } .playlist { max-height: 320px; overflow-y: auto; } .track { display: flex; align-items: center; gap: 9px; padding: 6px; font-size: 12.5px; } .track.clickable { cursor: pointer; } .track.clickable:hover { background: var(--sunk); } .track.current { background: var(--sunk); border-left: 2px solid var(--hot); } .track.played { color: var(--dim); } .track.blocked { opacity: 0.45; text-decoration: line-through; } .track-art { width: 36px; height: 27px; object-fit: cover; flex: none; background: var(--sunk); } .track-art.blank { border: 1px dashed var(--line); } .track-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .track-title.masked { color: var(--dim); letter-spacing: 0.2em; } .track-who { font-family: var(--mono); font-size: 10px; color: var(--ok); } .track-bad { font-family: var(--mono); font-size: 10px; color: var(--bad); } .pool-progress { margin: -4px 0 10px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; } .mine-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; font-size: 12.5px; border-bottom: 1px solid var(--line); } .mine-item:last-child { border-bottom: none; } .mine-item > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mine-item.played { color: var(--dim); } .withdraw { padding: 1px 8px; font-size: 15px; line-height: 1.2; } .played-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } .empty { color: var(--dim); font-size: 12.5px; } /* per-track minimum play time, so a playlist import stays tunable row by row */ .track-min { display: flex; align-items: center; gap: 8px; flex-basis: 100%; } .track-min output { font-family: var(--mono); font-size: 10px; color: var(--dim); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; } .member { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; } .member .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; } .member.away { color: var(--dim); } .member.away .dot { background: transparent; border: 1px solid var(--line); } .mname { flex: 1; } .credits { font-family: var(--mono); color: var(--hot); font-size: 10px; letter-spacing: 0.1em; } /* Sits between the name and the score, so a run reads as part of the row rather than decoration hung off the end. `flex: none` keeps it from being squeezed when a long name pushes the row. */ .streak { flex: none; font-size: 11px; line-height: 1; } .streak.hot { filter: saturate(1.2); } .streak.cold { opacity: 0.85; } @media (prefers-reduced-motion: no-preference) { .streak.hot { animation: streak-pop 320ms ease-out; } } @keyframes streak-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .away-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } /* A button revealed on hover rather than a clickable row: removing someone is destructive and shouldn't sit under a stray click. */ .kick-btn { margin-left: auto; padding: 2px 8px; font-size: 10px; font-weight: 600; color: var(--bad); border-color: transparent; background: transparent; opacity: 0; transition: opacity 0.12s; } .member:hover .kick-btn, .kick-btn:focus-visible { opacity: 1; } .kick-btn:hover { border-color: var(--bad); color: var(--bad); } /* -- host controls -------------------------------------------------------- */ .host-controls { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; } .host-controls .row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; } .soundcheck-row input { flex: 1; min-width: 150px; } .diag { margin-top: 10px; color: var(--dim); font-size: 12.5px; } .diag summary { cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; } .diag label { display: flex; align-items: center; gap: 8px; flex: 1; } label.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; } label.checkbox input { width: auto; } .drift-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; } .drift-table th, .drift-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); } .local-diag { margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--dim); } /* -- overlays ------------------------------------------------------------- */ .gesture-overlay { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); display: grid; place-items: center; } .gesture-card { text-align: center; padding: 32px; max-width: 420px; } .gesture-card h2 { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; } .gesture-card p { color: var(--dim); margin: 0 0 22px; font-size: 14px; } .toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; } .toast { background: var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--dim); padding: 10px 14px; font-size: 12.5px; max-width: 330px; opacity: 1; transition: opacity 0.4s; } .toast.out { opacity: 0; } .toast.ok { border-left-color: var(--ok); } .toast.warn { border-left-color: var(--warn); } .toast.error { border-left-color: var(--bad); } @media (prefers-reduced-motion: reduce) { .toast, .kick-btn, #progress-fill { transition: none; } } .member.you .mname { font-weight: 700; } .member.you .credits { color: var(--hot); } /* Cover art is square; a video still is 16:9 and gets cropped to match. */ .track-art.square { width: 30px; height: 30px; } .np-art { border-radius: 0; } .inline-select { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); } .inline-select select { width: auto; } /* ── hearts ──────────────────────────────────────────────────────────────── The heart sits in the volume row because that row is always present while a song plays, whether or not you've guessed. Deliberately quiet until you press it: an un-pressed heart is an offer, a pressed one is the accent. */ .heart-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--line); color: var(--dim); padding: 4px 9px; font-size: 14px; line-height: 1; cursor: pointer; transition: color 0.15s, border-color 0.15s, transform 0.12s; } .heart-btn:hover { color: var(--hot); border-color: var(--hot); } .heart-btn.on { color: var(--hot); border-color: var(--hot); } /* A short kick on press. The room-wide burst is the real feedback; this is just so the button itself feels like it did something. */ .heart-btn.on .heart-glyph { animation: heart-pop 0.32s ease-out; } @keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } } .heart-count { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; } #likes-panel summary { cursor: pointer; list-style: none; display: flex; align-items: center; } #likes-panel summary::-webkit-details-marker { display: none; } #likes-panel summary h3 { margin: 0; } /* The marker has to say which way it will go, and rotate rather than swap glyphs so the state change reads as one motion. */ #likes-panel summary::after { content: "›"; margin-left: auto; color: var(--dim); font-size: 15px; transition: transform 0.15s; } #likes-panel[open] summary::after { transform: rotate(90deg); } /* ── end of game ───────────────────────────────────────────────────────── */ .fork-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; } .fork-choices .big { flex: 1 1 auto; } .ghost { background: none; border: 1px solid var(--line); color: var(--fg); padding: 10px 16px; cursor: pointer; font-size: 13px; } .ghost:hover { border-color: var(--hot); color: var(--hot); } /* The replay's way out, shown once the run is finished. A real rather than a button with an onclick, so it can be middle-clicked or opened in a new tab like the link it is — which means it needs its own box, since the button styling further up is scoped to the element. */ .exit-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; } .exit-link { display: inline-block; text-decoration: none; background: var(--hot); border: 1px solid var(--hot); color: var(--on-hot); padding: 9px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .exit-link:hover { filter: brightness(1.08); color: var(--on-hot); } .results-card { max-width: 640px; } .results-h3 { margin: 22px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim); font-weight: 700; } .hint-inline { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dim); font-size: 11px; margin-left: 8px; } .standings-final { list-style: none; margin: 0; padding: 0; } .standings-final .rank { font-family: var(--mono); font-size: 11px; color: var(--dim); width: 18px; flex: none; } .standings-final .mname { flex: 1; } /* First place carries the accent; ranking by colour alone would be lost on anyone who can't distinguish it, so the numeral does the real work. */ .standings-final li:first-child .mname { font-weight: 800; color: var(--hot); } .podium { list-style: none; margin: 0; padding: 0; } .podium-row { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .podium-row:last-child { border-bottom: none; } .medal { font-size: 15px; color: var(--hot); flex: none; width: 18px; } .podium-row .mname { font-weight: 700; flex: none; } .podium-track { color: var(--dim); font-size: 11.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .podium-likes { font-family: var(--mono); font-size: 11px; color: var(--hot); flex: none; } .podium-row.you .mname, .standings-final .member.you .mname { text-decoration: underline; } .results-rounds, .results-yourlikes { list-style: none; margin: 0; padding: 0; } .results-rounds li, .results-yourlikes li { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .results-rounds li:last-child, .results-yourlikes li:last-child { border-bottom: none; } .results-rounds .track-title, .results-yourlikes .track-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .round-likes { font-family: var(--mono); font-size: 10px; color: var(--hot); flex: none; } .verdict { font-family: var(--mono); font-size: 10px; flex: none; } .verdict.right { color: var(--ok); } .verdict.wrong { color: var(--bad); } .verdict.none { color: var(--dim); } @media (prefers-reduced-motion: reduce) { .heart-btn, .heart-btn.on .heart-glyph, #likes-panel summary::after { animation: none; transition: none; } } /* -- host projection (lobby) --------------------------------------------- */ /* Sits directly above Start, because it exists to inform that one decision. */ .projection { margin: 10px 0 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2, transparent); } .proj-line { margin: 0 0 3px; font-family: var(--mono); font-size: 12px; color: var(--fg); letter-spacing: 0.02em; } .projection .hint { margin: 0; } /* -- faces ---------------------------------------------------------------- */ /* Same footprint as the presence dot it replaces, so a roster of Discord joiners and one of web joiners are the same shape. */ .face { width: 18px; height: 18px; border-radius: 50%; flex: none; object-fit: cover; background: var(--line); } .member .face { width: 16px; height: 16px; } .member.away .face { filter: grayscale(1); opacity: 0.55; } .guess-choices button { display: inline-flex; align-items: center; gap: 6px; } .guess-choices .face { width: 20px; height: 20px; } /* -- heart ---------------------------------------------------------------- */ /* Its own band under the jacket rather than a 24px glyph wedged beside the volume slider, where it was small enough that people could not find it at all. Hearting is one of the two things a player does all game; it should be about as prominent as guessing. */ .heart-row { display: flex; justify-content: center; margin: 10px 0 2px; } .heart-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--fg); font-size: 14px; cursor: pointer; } .heart-btn:hover { border-color: var(--hot); } .heart-btn .heart-glyph { font-size: 20px; /* A glyph sits on its text baseline, which is nowhere near the middle of a 44px button — the hearts rode low and looked misaligned. Give them a box and centre them in it. */ line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 22px; width: 17px; } .heart-btn .heart-count { margin-left: 6px; font-family: var(--mono); font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; } .heart-btn.on { border-color: var(--hot); color: var(--hot); } .heart-btn.on .heart-count { color: var(--hot); } @media (prefers-reduced-motion: no-preference) { .heart-btn.on .heart-glyph { animation: heart-pop 260ms ease-out; } .heart-btn.on .heart-glyph:nth-child(2) { animation-delay: 45ms; } .heart-btn.on .heart-glyph:nth-child(3) { animation-delay: 90ms; } } @keyframes heart-pop { from { transform: scale(0.6); } to { transform: scale(1); } } /* A fixed slot on every roster row, so the submission counts line up down the column instead of shifting left on rows that happen to be kickable. */ .kick-slot { flex: none; width: 66px; display: flex; justify-content: flex-end; } .kick-slot .kick-btn { opacity: 0; } .member:hover .kick-slot .kick-btn, .kick-slot .kick-btn:focus-visible { opacity: 1; }