/* Jelly Fork web app (app.html): home, start swiping, lobby, the deck, matches, history, settings.
Tokens and shared components live in jelly.css. Mobile first (Android Chrome 360-412 px), roomy
on desktop. Motion: slow fades and slides only. */
body {
display: flex; flex-direction: column;
min-height: 100vh; min-height: 100dvh;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
main { flex: 1; display: flex; width: 100%; max-width: 480px; margin: 0 auto; }
.screen { flex: 1; display: flex; flex-direction: column; padding: 8px var(--gutter) 16px; min-width: 0; animation: screen-in .35s var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } }
body[data-tabs] .screen { padding-bottom: 112px; }
h1 { font-size: clamp(36px, 10.5vw, 46px); line-height: 1.02; margin: 0 0 12px; }
h2 { font-size: 26px; line-height: 1.1; margin: 0 0 8px; }
h3 { font-size: 18px; line-height: 1.2; margin: 0; }
.lede { font-size: 17px; line-height: 1.42; color: var(--ink-2); margin: 0 0 20px; text-wrap: pretty; }
.fine { font-size: 13px; line-height: 1.45; color: var(--ink-3); margin: 14px 0 0; }
.center { text-align: center; }
.error { color: var(--raspberry); font-size: 14px; font-weight: 600; margin: 10px 0; line-height: 1.4; }
/* Top bars */
.topbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 56px; padding: 6px var(--gutter); max-width: 480px; width: 100%; margin: 0 auto;
}
body[data-tabs] .topbar, body[data-screen="setup"] .topbar, body[data-screen="deck"] .topbar,
body[data-screen="lobby"] .topbar, body[data-screen="building"] .topbar { display: none; }
.wordmark img { display: block; height: 44px; width: auto; }
.progress { min-width: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deckbar {
display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px;
padding: 8px var(--gutter) 2px; max-width: 480px; width: 100%; margin: 0 auto;
}
.icon-btn {
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--surface-rim); padding: 0; cursor: pointer;
background: var(--soft-pill); box-shadow: var(--shadow-sm); display: grid; place-items: center;
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.deck-pill {
justify-self: center; min-width: 0; max-width: 100%; padding: 6px 18px; border-radius: 999px; text-align: center;
background: var(--soft-pill); border: 1px solid var(--surface-rim); box-shadow: var(--shadow-sm);
}
.deck-pill strong { display: block; font: 600 15px/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.deck-pill span { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-pill span:empty { display: none; }
/* Connection status */
.conn {
align-self: center; margin: 0 var(--gutter) 4px; padding: 7px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; background: var(--surface); color: var(--ink-2);
}
.conn[data-kind="offline"] { background: color-mix(in srgb, var(--nah) 16%, var(--surface-solid)); color: var(--ink); }
.conn.pulse { animation: soft-pulse .6s ease; }
@keyframes soft-pulse { 40% { opacity: .55; } }
.conn[data-kind="reconnecting"]::before {
content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px;
border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink-2); animation: spin 1.2s linear infinite;
}
/* Fields */
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field-input {
width: 100%; height: 54px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface-2); padding: 0 20px; font-size: 17px; outline: none;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-input::placeholder { color: var(--ink-3); opacity: .75; }
.field-input:focus { border-color: var(--accent); background: var(--surface-solid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.field-input[aria-invalid] { border-color: var(--raspberry); }
.field-input.code, #code-input { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
/* ---------------------------------------------------------------------------
Home
--------------------------------------------------------------------------- */
.home { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.home-head h1 { margin: 8px 0 0; }
.home-mascot { width: 118px; height: auto; flex: none; margin-bottom: -6px; filter: drop-shadow(0 10px 16px rgba(229, 64, 94, .18)); }
.start-card, .join-card { padding: 22px 20px 20px; }
.start-card h2, .join-card h2 { font-size: 24px; }
.start-card .lede, .join-card .lede { font-size: 16px; margin-bottom: 16px; }
.start-top { display: flex; gap: 10px; align-items: flex-start; }
.start-top > div:first-child { flex: 1; min-width: 0; }
.start-card .btn { margin-top: 4px; }
/* Mini card stack (three little jelly cards) */
.mini-stack { position: relative; width: 112px; height: 104px; flex: none; margin: -4px -4px 0 0; }
.mini-card {
position: absolute; top: 4px; width: 66px; height: 90px; border-radius: 13px; overflow: hidden;
background: linear-gradient(180deg, var(--top), var(--bottom)); border: 2px solid rgba(255, 255, 255, .9);
box-shadow: 0 4px 12px rgba(120, 50, 40, .16);
}
.mini-card img { position: absolute; left: -10%; top: -8%; width: 120%; height: auto; }
.mini-card span {
position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 5px; border-radius: 7px;
background: rgba(255, 255, 255, .88); font: 600 8.5px/1.2 var(--font-head); color: #2A2026; white-space: nowrap; overflow: hidden;
}
.mini-card:nth-child(1) { left: 0; transform: rotate(-9deg); }
.mini-card:nth-child(2) { left: 22px; transform: rotate(-3deg); }
.mini-card:nth-child(3) { left: 44px; transform: rotate(5deg); top: 2px; }
.join-row { display: flex; gap: 10px; }
.join-row .field-input { flex: 1; min-width: 0; }
.join-row .btn { flex: none; min-width: 84px; }
.pro-card {
display: flex; align-items: center; gap: 10px; padding: 18px 16px 18px 20px; border-radius: 28px; text-decoration: none; color: #fff;
background: linear-gradient(120deg, var(--coral) 0%, var(--tomato) 45%, var(--raspberry) 100%);
box-shadow: 0 14px 30px rgba(229, 64, 94, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pro-card-text { flex: 1; min-width: 0; }
.pro-card-title { display: flex; align-items: center; gap: 6px; font: 700 19px/1.2 var(--font-head); }
.pro-card-title svg { width: 18px; height: 18px; fill: #FFE3D3; }
.pro-card-sub { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; opacity: .92; }
.pro-card img { width: 72px; height: auto; flex: none; }
.pro-card .chev { width: 18px; height: 18px; flex: none; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.get-app { display: flex; justify-content: center; }
.store-badge {
display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 14px;
background: #111; color: #fff; text-decoration: none; font: 600 15px/1.15 var(--font);
}
.store-badge svg { width: 22px; height: 22px; fill: #fff; }
.store-badge small { display: block; font-size: 10px; font-weight: 500; opacity: .8; }
.store-badge.soon { background: var(--surface); color: var(--ink); border: 1px solid var(--surface-rim); }
.store-badge.soon svg { fill: var(--ink); }
/* Floating tab bar */
.tabbar {
position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8;
display: flex; gap: 4px; padding: 6px; border-radius: 999px; width: min(340px, calc(100% - 32px));
background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
-webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
}
.tabbar a {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 999px;
color: var(--ink); text-decoration: none; font: 600 12px/1.1 var(--font);
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--tomato); background: color-mix(in srgb, var(--tomato) 13%, transparent); }
.tabbar a[aria-current="page"] svg { fill: currentColor; stroke: currentColor; }
.tabbar a[data-tab="history"][aria-current="page"] svg, .tabbar a[data-tab="account"][aria-current="page"] svg { fill: none; stroke-width: 2.3; }
/* ---------------------------------------------------------------------------
Start swiping (filters)
--------------------------------------------------------------------------- */
.sheet-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 0 4px; }
.sheet-bar strong { text-align: center; font: 600 17px/1.2 var(--font-head); }
.sheet-bar .btn { min-height: 38px; font: 600 15px/1 var(--font); padding: 0 16px; }
.setup { display: flex; flex-direction: column; gap: 22px; padding: 12px 0 0; }
.setup-sec h3 { margin-bottom: 10px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sec-head h3 { margin: 0; }
.sec-head small { color: var(--ink-3); font-size: 13px; }
.tile {
border: 1.5px solid var(--surface-rim); background: var(--surface); border-radius: var(--radius-tile); box-shadow: var(--shadow-sm);
cursor: pointer; text-align: left; transition: border-color .2s, background .2s, box-shadow .2s;
}
.tile[aria-pressed="true"] { border-color: var(--tomato); background: color-mix(in srgb, var(--tomato) 7%, var(--surface-solid)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tomato) 14%, transparent); }
.where-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.where-note a { color: var(--accent-text); font-weight: 600; }
.tile.where { padding: 14px; display: flex; flex-direction: column; gap: 2px; min-height: 88px; }
.tile.where svg { width: 20px; height: 20px; fill: none; stroke: var(--tomato); stroke-width: 2; stroke-linejoin: round; margin-bottom: 6px; }
.tile.where strong { font: 600 16px/1.2 var(--font-head); }
.tile.where small { color: var(--ink-3); font-size: 12.5px; line-height: 1.3; }
.area-search { display: flex; gap: 8px; margin-top: 10px; }
.area-search .field-input { flex: 1; min-width: 0; height: 48px; font-size: 16px; }
.area-results { list-style: none; margin: 8px 0 0; padding: 4px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.area-results button { width: 100%; text-align: left; padding: 11px 12px; border: 0; background: none; border-radius: 12px; cursor: pointer; font-size: 15px; line-height: 1.3; }
.area-results button:hover, .area-results button:focus-visible { background: var(--surface-2); }
.area-results small { display: block; color: var(--ink-3); font-size: 12.5px; }
.where-note { min-height: 0; margin: 8px 2px 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.where-note:empty { display: none; }
.locked-row {
display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 18px;
background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.locked-row > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.locked-row span:not(.pro-tag) { flex: 1; min-width: 0; }
.locked-row strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.locked-row small { display: block; font-size: 12.5px; color: var(--ink-3); }
.mood-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile.mood { padding: 10px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tile.mood img { width: 62px; height: 56px; object-fit: contain; }
.tile.mood span { font: 600 14px/1.15 var(--font-head); }
.seg { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-rim); box-shadow: var(--shadow-sm); }
.seg button {
flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer;
font: 600 15px/1 var(--font); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 3px;
transition: background .2s, color .2s;
}
.seg button[aria-checked="true"] { background: linear-gradient(180deg, var(--coral), var(--tomato)); color: #fff; box-shadow: 0 4px 10px rgba(229, 64, 94, .25); }
.seg button.locked { color: var(--ink-3); }
.seg button.locked svg { width: 11px; height: 11px; fill: currentColor; }
.pro-hint { font-size: 13px; color: var(--ink-2); margin: 8px 4px 0; }
.pro-hint a { color: var(--accent-text); font-weight: 600; }
.cuisine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip-toggle {
display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 5px 12px 5px 6px; border-radius: 999px;
border: 1.5px solid var(--surface-rim); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; text-align: left;
font: 600 14.5px/1.15 var(--font); transition: border-color .2s, background .2s;
}
.chip-toggle .dot { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; background: linear-gradient(180deg, var(--top), var(--bottom)); }
.chip-toggle .dot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform: scale(1.35); }
.chip-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-toggle[aria-pressed="true"] { border-color: var(--tomato); background: color-mix(in srgb, var(--tomato) 8%, var(--surface-solid)); }
.toggles { display: flex; flex-direction: column; gap: 0; }
.toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; position: relative; }
.toggle-row > span:first-child { flex: 1; min-width: 0; }
.toggle-row strong { display: block; font-size: 15px; font-weight: 600; }
.toggle-row small { display: block; font-size: 12.5px; color: var(--ink-3); }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 50px; height: 30px; border-radius: 999px; background: var(--surface-2); position: relative; flex: none; transition: background .25s; border: 1px solid var(--line); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.toggle-row input:checked + .switch { background: var(--yum); border-color: transparent; }
.toggle-row input:checked + .switch::after { transform: translateX(20px); }
.toggle-row input:focus-visible + .switch { outline: 3px solid var(--focus); outline-offset: 2px; }
.setup-cta { position: sticky; bottom: 0; padding: 14px 0 calc(8px + env(safe-area-inset-bottom)); margin-top: 4px;
background: linear-gradient(180deg, transparent, var(--blush) 30%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .setup-cta { background: linear-gradient(180deg, transparent, #17121A 30%); } }
/* Building */
.building { display: flex; flex-direction: column; align-items: center; }
.building-mascot { width: 170px; height: auto; margin-bottom: 10px; animation: float 3.6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.dots { display: flex; gap: 8px; margin-top: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tomato); opacity: .25; animation: dot 1.8s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .3s; }
.dots i:nth-child(3) { animation-delay: .6s; }
@keyframes dot { 40% { opacity: .9; } }
/* ---------------------------------------------------------------------------
Lobby + invite
--------------------------------------------------------------------------- */
.lobby { padding-top: 14px; display: flex; flex-direction: column; }
.lobby h1 { font-size: clamp(32px, 9vw, 40px); }
.note-card { padding: 12px 16px; border-radius: 18px; background: color-mix(in srgb, var(--glow) 40%, var(--surface-solid)); font-size: 14.5px; line-height: 1.4; margin: -6px 0 16px; }
.invite-card { padding: 18px; }
.invite-top { display: flex; align-items: center; gap: 16px; }
.qr { width: 112px; height: 112px; flex: none; border-radius: 16px; background: #fff; padding: 8px; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.invite-code small { display: block; font-size: 12px; color: var(--ink-3); }
.invite-code strong { display: block; font: 700 30px/1.1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; margin: 2px 0; }
.invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.invite-actions .btn { width: 100%; font-size: 15px; }
.invite-actions svg { width: 18px; height: 18px; }
.invite-link { margin: 12px 2px 0; font-size: 13px; color: var(--ink-3); text-align: center; overflow-wrap: anywhere; }
.whos-in { margin-top: 22px; }
.whos-in h3 { margin-bottom: 8px; }
.people-list { list-style: none; margin: 0; padding: 0; }
.people-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 15.5px; }
.people-list li + li { border-top: 1px solid var(--line); }
.people-list .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 14px/1 var(--font-head); color: #fff; background: var(--tomato); }
.people-list li:not(:first-child) .avatar { background: var(--surface-2); color: var(--ink); }
.people-list .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-list .role { font-size: 12.5px; color: var(--ink-3); }
.people-list .waiting .avatar { background: none; border: 1.5px dashed var(--ink-3); }
.people-list .waiting .who { color: var(--ink-3); white-space: normal; font-size: 14px; }
.lobby-cta { position: sticky; bottom: 0; padding: 18px 0 calc(8px + env(safe-area-inset-bottom)); margin-top: auto; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding: 12px;
background: rgba(30, 18, 24, .32); animation: fade .3s ease both; }
.sheet { width: 100%; max-width: 440px; padding: 22px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--surface-solid); animation: sheet-in .4s var(--ease) both; }
.sheet h2 { font-size: 24px; margin-bottom: 14px; }
.sheet .btn-ghost { margin-top: 6px; }
.sheet-mascot { display: block; width: 90px; height: auto; margin: -4px auto 6px; }
.sheet #signin-title, .sheet #signin-lede { text-align: center; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 700px) { .sheet-backdrop { align-items: center; } }
/* ---------------------------------------------------------------------------
Join (guest) and simple notes
--------------------------------------------------------------------------- */
.join { margin: auto 0; padding: 20px 0; }
.join-mascot { display: block; width: 130px; height: auto; margin: 0 0 6px -6px; }
.eyebrow { color: var(--accent-text); }
.join h1 { font-size: clamp(32px, 9vw, 40px); }
.center-note { margin: auto 0; text-align: center; padding: 24px 0; }
.center-note .lede { margin-bottom: 8px; }
.center-note .btn { margin-top: 16px; }
.note-mascot { display: block; width: 130px; height: auto; margin: 0 auto 10px; }
.spinner { width: 28px; height: 28px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 1s linear infinite; }
#loading-text { color: var(--ink-2); margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.done-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.done-actions .btn { margin-top: 0; }
.people { list-style: none; margin: 18px 0 0; padding: 4px 18px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; }
.people li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 15px; }
.people li + li { border-top: 1px solid var(--line); }
.people .who { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .count { color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; }
.people .is-done .count { color: var(--done); font-weight: 700; }
.match-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; text-align: left; }
.match-list:empty { display: none; }
.match-row {
display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 8px 14px 8px 8px; border-radius: 22px;
background: var(--surface); border: 1px solid var(--surface-rim); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
}
.match-row .thumb { width: 52px; height: 52px; border-radius: 14px; flex: none; overflow: hidden; background: linear-gradient(180deg, var(--top), var(--bottom)); }
.match-row .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; transform: scale(1.25); }
.match-text { flex: 1; min-width: 0; }
.match-row strong { display: block; font: 600 16.5px/1.2 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row .go svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
/* History + settings */
.history, .account { padding-top: 18px; }
.history h1, .account h1 { margin-top: 8px; }
.history-group { margin-top: 20px; }
.history-group h3 { font-size: 15px; color: var(--ink-2); font-family: var(--font); font-weight: 600; margin-bottom: 8px; }
.history-group .match-list { margin-top: 0; }
.signin-nudge { display: flex; gap: 14px; align-items: flex-start; padding: 16px; margin-bottom: 4px; }
.signin-nudge img { width: 64px; height: auto; flex: none; }
.signin-nudge strong { font: 600 17px/1.2 var(--font-head); }
.signin-nudge p { margin: 4px 0 10px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.account-card { padding: 20px; margin-bottom: 16px; }
.account-card p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.45; }
.account-card .who { font: 600 18px/1.3 var(--font-head); color: var(--ink); margin-bottom: 4px; overflow-wrap: anywhere; }
.account-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 22px; }
.account-links a { color: var(--ink-2); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
/* ---------------------------------------------------------------------------
Cards (the app's card: jelly art on its pastel, cuisine pill, glass info panel)
--------------------------------------------------------------------------- */
.deck { position: relative; flex: 1; min-height: 400px; margin-top: 6px; perspective: 1400px; }
.card {
position: absolute; inset: 0 0 18px; border-radius: var(--radius-card);
transform-origin: 50% 90%; will-change: transform; touch-action: none;
user-select: none; -webkit-user-select: none; cursor: grab;
transition: transform .45s var(--ease), opacity .4s;
}
.card:focus-visible { outline-offset: 4px; }
.card.dragging { transition: none; cursor: grabbing; }
.card.leaving { pointer-events: none; z-index: 2; transition: transform .42s cubic-bezier(.3, .6, .4, 1), opacity .42s; }
.card[data-depth="1"] { transform: translateY(12px) scale(0.955); pointer-events: none; }
.card[data-depth="2"] { transform: translateY(24px) scale(0.91); pointer-events: none; opacity: .75; }
.card[data-depth="1"] .face, .card[data-depth="2"] .face { filter: saturate(.92) brightness(.98); }
.card:not([data-depth="0"]) .info-btn, .card.leaving .info-btn { visibility: hidden; }
.card.return-left { animation: return-left .45s var(--ease); }
.card.return-right { animation: return-right .45s var(--ease); }
.card.nudge { animation: nudge .5s var(--ease); }
@keyframes return-left { from { transform: translate(-120%, 30px) rotate(-16deg); opacity: .4; } }
@keyframes return-right { from { transform: translate(120%, 30px) rotate(16deg); opacity: .4; } }
@keyframes nudge { 40% { transform: translateX(-6px); } }
.flipper { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.card.flipped .flipper { transform: rotateY(180deg); }
.face {
position: absolute; inset: 0; border-radius: var(--radius-card); overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .7);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .face { border-color: rgba(255, 255, 255, .12); } }
.back { transform: rotateY(180deg); background: var(--surface-solid); display: flex; flex-direction: column; }
.front { container-type: size; color: #1D1619; background: #FFE3D3; }
.clay { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--top), var(--bottom)); }
.clay img {
position: absolute; left: -2%; width: 104%; height: auto; aspect-ratio: 2 / 3;
top: -14%;
top: calc(36cqh - 78cqw); /* dish centred at 36% of the card height, as in the app */
-webkit-user-drag: none; user-select: none; pointer-events: none;
}
.clay img.fade { opacity: 0; transition: opacity .4s ease; }
.clay img.fade.in { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clay::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.08); } }
.front .pill {
position: absolute; top: 14px; left: 14px; max-width: calc(100% - 100px);
display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px;
font: 600 13px/1.2 var(--font-head); color: #1D1619; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: rgba(255, 255, 255, .55); border: 0.75px solid rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.front .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.info-btn {
position: absolute; top: 8px; right: 8px; min-width: 48px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px;
background: none; cursor: pointer; display: grid; place-items: center;
}
.info-btn span {
display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 8px; border-radius: 999px;
background: rgba(255, 255, 255, .55); border: 0.75px solid rgba(255, 255, 255, .7); color: #1D1619;
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 600 12.5px/1.2 var(--font-head);
}
.info-btn svg { width: 15px; height: 15px; fill: none; stroke: #1D1619; stroke-width: 2.2; stroke-linecap: round; }
.front .panel {
position: absolute; left: 10px; right: 10px; bottom: 10px;
padding: 15px 16px 14px; border-radius: var(--radius-panel);
background: rgba(250, 250, 249, .86); border: 0.75px solid rgba(255, 255, 255, .8);
-webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.front .name {
font: 700 clamp(23px, 7vw, 28px)/1.12 var(--font); letter-spacing: -0.015em; margin: 0 0 3px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance;
}
.front .sub { font: 500 14.5px/1.3 var(--font); color: #5E5157; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.front .fav { display: flex; align-items: center; gap: 5px; margin-top: 8px; font: 600 14px/1.25 var(--font-head); color: #A86A12; }
.front .fav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.front .why { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: #5E5157; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.front .order { display: flex; align-items: flex-start; gap: 5px; margin-top: 6px; font: 600 13.5px/1.3 var(--font); color: #1D1619; }
.front .order b { color: #C2361B; font-weight: 700; flex: none; }
.front .order span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.front .order svg { width: 13px; height: 13px; flex: none; fill: #C2361B; margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px;
background: rgba(58, 46, 54, .07); font: 600 12px/1.2 var(--font); color: #1D1619;
}
.chip svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
/* YUM / NAH stamps and tint, driven by --yum / --nah (0...1) while dragging */
.stamp {
position: absolute; top: 64px; padding: 8px 20px; border-radius: 22px;
font: 700 44px/1 var(--font-head); letter-spacing: 2px; color: #fff;
border: 3px solid rgba(255, 255, 255, 0.7); pointer-events: none;
box-shadow: 0 5px 0 var(--stamp-edge), 0 8px 24px rgba(0, 0, 0, 0.18);
}
.stamp.like { left: 24px; background: var(--yum); --stamp-edge: rgba(20, 90, 50, 0.45);
opacity: calc(var(--yum-p, 0) * 1.4); transform: rotate(-12deg) scale(calc(0.85 + 0.15 * var(--yum-p, 0))); }
.stamp.nope { right: 24px; background: var(--nah); --stamp-edge: rgba(140, 40, 60, 0.45);
opacity: calc(var(--nah-p, 0) * 1.4); transform: rotate(12deg) scale(calc(0.85 + 0.15 * var(--nah-p, 0))); }
.card .tint { position: absolute; inset: 0; border-radius: var(--radius-card); pointer-events: none; }
.card .tint.like { background: var(--yum); opacity: calc(var(--yum-p, 0) * 0.16); }
.card .tint.nope { background: var(--nah); opacity: calc(var(--nah-p, 0) * 0.16); }
/* Back */
.back .map { flex: 1; min-height: 150px; background: var(--surface-2); position: relative; }
.back .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.back .info { padding: 14px 18px 12px; overflow-y: auto; max-height: 64%; }
.back .info h3 { font: 700 22px/1.2 var(--font-head); margin: 0 0 2px; }
.back .info .sub { color: var(--ink-2); margin: 0 0 6px; font-size: 14.5px; }
.back .fav-box { margin: 6px 0 8px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--glow) 28%, var(--surface-solid)); font-size: 14px; line-height: 1.4; }
.back .fav-box strong { display: block; color: var(--accent-text); font-size: 13px; }
.back .row {
display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 0;
border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; color: inherit; text-decoration: none;
}
.back a.row { color: var(--accent-text); font-weight: 600; }
.back .row span { min-width: 0; overflow-wrap: anywhere; }
.back .row svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.back .tap-back { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 0; }
/* Sponsored card (never swipeable: the "Keep swiping" button moves on) */
.card.sponsored { cursor: default; touch-action: auto; }
.card.sponsored .face { background: var(--surface-solid); display: flex; flex-direction: column; padding: 14px; }
.sponsored-pill { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); font: 600 12px/1.2 var(--font); color: var(--ink-2); }
.sponsored-body { flex: 1; margin-top: 12px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; min-height: 250px; background: var(--surface-2); }
.sponsored-body ins { display: block; width: 100%; min-height: 250px; }
.ad-next { display: flex; justify-content: center; padding: 30px 0 6px; } /* 24 px+ away from the ad */
.ad-next .btn { width: auto; padding: 0 28px; }
.ad-next svg { width: 20px; height: 20px; }
.ad-placeholder { width: 100%; height: 100%; min-height: 250px; display: grid; place-items: center; text-align: center; color: var(--ink-3); font-size: 13px; padding: 16px;
background: repeating-linear-gradient(45deg, var(--surface-2) 0 10px, transparent 10px 20px); }
/* In-content ad slots (match screen, between sessions) */
.ad-slot { margin-top: 22px; padding: 12px; border-radius: 24px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); text-align: center; }
.ad-slot > small { display: block; font-size: 11.5px; font-weight: 600; color: rgba(29, 22, 25, .6); margin-bottom: 8px; text-align: left; }
.ad-slot ins { display: block; min-height: 120px; }
#ad-between { background: var(--surface); border-color: var(--surface-rim); }
#ad-between > small { color: var(--ink-3); }
/* Deck buttons (undo, X, heart, map) */
.actions { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 16px 0 6px; }
.round {
width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--surface-rim); cursor: pointer;
background: var(--soft-pill); box-shadow: var(--shadow); display: grid; place-items: center;
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
transition: transform .2s var(--ease), opacity .2s;
}
.round:active { transform: scale(0.94); }
.round svg { width: 26px; height: 26px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.round.nope svg { stroke: var(--ink); }
.round.like { border: 0; background: linear-gradient(180deg, var(--coral), var(--tomato) 55%, #EE4B4E); box-shadow: var(--shadow-cta); }
.round.like svg { fill: #fff; stroke: none; width: 28px; height: 28px; }
.round.small { width: 50px; height: 50px; }
.round.small svg { width: 20px; height: 20px; stroke: var(--ink-2); stroke-width: 2.2; }
.round:disabled { opacity: .4; cursor: default; }
.hint { display: none; text-align: center; font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }
@media (hover: hover) and (pointer: fine) { .hint { display: block; } }
body[data-ad-top] .actions { visibility: hidden; }
body[data-ad-top] .hint { visibility: hidden; }
/* ---------------------------------------------------------------------------
Match (the dish on its pastel, the mascot with the heart, calm fades)
--------------------------------------------------------------------------- */
.overlay {
--top: #F8B5B7; --bottom: #F8B2B3;
position: fixed; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain;
display: flex; flex-direction: column; align-items: center;
padding: max(16px, env(safe-area-inset-top)) var(--gutter) max(16px, env(safe-area-inset-bottom));
background: linear-gradient(180deg, var(--top), var(--bottom));
color: #1D1619; color-scheme: light;
animation: fade .5s ease both;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .overlay { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.14); } }
.overlay-inner { width: 100%; max-width: 420px; margin: auto; text-align: center; padding: 8px 0; }
.match-mascot { display: block; width: 120px; height: auto; margin: 0 auto 2px; animation: rise .7s var(--ease) both .05s; }
.overlay h2 { font: 700 clamp(38px, 11vw, 46px)/1.05 var(--font-head); margin: 0 0 6px; animation: rise .7s var(--ease) both .12s; }
.match-who { font: 500 16px/1.3 var(--font); color: rgba(29, 22, 25, 0.62); margin: 0 0 6px; animation: rise .7s var(--ease) both .18s; }
.match-dish { width: min(310px, 80vw); height: clamp(150px, 30vh, 280px); margin: 0 auto 6px; animation: rise .8s var(--ease) both .22s; }
.match-dish img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block;
-webkit-mask-image: radial-gradient(closest-side, #000 64%, transparent 100%); mask-image: radial-gradient(closest-side, #000 64%, transparent 100%); }
.match-name { font: 700 30px/1.12 var(--font); letter-spacing: -0.015em; margin: 0 0 4px; text-wrap: balance; }
.match-sub { font: 500 15px/1.3 var(--font); color: rgba(29, 22, 25, 0.62); margin: 0 0 8px; }
.match-order { display: flex; align-items: center; justify-content: center; gap: 7px; font: 600 17px/1.3 var(--font-head); margin: 0 0 12px; }
.match-order svg { width: 16px; height: 16px; fill: #C2361B; flex: none; }
.match-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 16px; }
.overlay .link-chip { background: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .75); color: #1D1619; }
.overlay-actions { display: grid; gap: 10px; }
.match-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.overlay .btn-soft { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .75); color: #1D1619; }
.overlay .btn-soft svg { width: 20px; height: 20px; }
.overlay :focus-visible { outline-color: #1D1619; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
/* Toast */
.toast {
position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%);
z-index: 40; width: max-content; max-width: calc(100% - 32px);
padding: 12px 18px; border-radius: 18px; background: var(--plum); color: #fff;
font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: var(--shadow);
animation: fade .3s ease both;
}
@media (prefers-reduced-motion: reduce) {
.card { transition: opacity .2s; }
.flipper { transition: none; }
.card.flipped .flipper { transform: none; }
.face { transition: opacity .25s; }
.back { transform: none; opacity: 0; }
.card.flipped .back { opacity: 1; }
.card.flipped .front { opacity: 0; }
.building-mascot, .dots i { animation: none; }
}
@media (min-width: 700px) {
.deck { min-height: 540px; }
main { max-width: 460px; }
}
@media (max-height: 700px) {
.deck { min-height: 330px; }
.actions { padding-top: 10px; gap: 14px; }
.round { width: 58px; height: 58px; }
.round.small { width: 46px; height: 46px; }
.hint { display: none; }
.stamp { top: 52px; font-size: 38px; }
.front .panel { padding: 13px 14px 12px; }
}
/* Legal links + app banner */
.legal-links { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--ink-3); margin: 8px 0 0 -8px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink-2); text-decoration: none; }
.app-banner {
display: flex; align-items: center; gap: 8px;
width: calc(100% - 2 * var(--gutter)); max-width: calc(480px - 2 * var(--gutter));
margin: 4px auto 0; padding: 6px 4px 6px 16px;
background: var(--surface); border: 1px solid var(--surface-rim); border-radius: 20px;
box-shadow: var(--shadow-sm); font-size: 14px; color: var(--ink-2);
}
body[data-screen="deck"] .app-banner { display: none; }
.app-banner span { flex: 1; min-width: 0; }
.app-banner-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.app-banner-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--ink-3); cursor: pointer; border-radius: 50%; }
.app-banner-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
/* Google details (Pro host): own box with Google attribution, never blended into our scores. */
.card .google-box { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 10px;
background: rgba(255,255,255,.92); color: #222; font-size: 13px; font-weight: 600; width: fit-content; max-width: 100%; }
.card .google-box .g-star { color: #E7A33E; }
.card .google-box .g-muted { color: #666; font-weight: 500; }
.card .google-box .g-open { color: #1e8e3e; }
.card .google-box .g-attr { margin-left: 8px; color: #666; font-size: 11px; font-weight: 600; }
/* ---------------------------------------------------------------------------
Wide screens (tablet landscape and desktop, 900 px and up). A top bar with the wordmark instead
of the floating tab bar; home, history, settings, lobby, filters and the match use the width.
The deck stays one phone-shaped card. Everything above stays the phone layout.
--------------------------------------------------------------------------- */
.tabbar .tabbar-brand { display: none; }
@media (min-width: 900px) {
:root {
--gutter: 28px;
--wrap: 1104px;
/* The deck card keeps a phone shape: as wide as the viewport height allows, 460 to 600 px. */
--deck-w: clamp(460px, calc((100vh - 230px) * 0.64 + 2 * var(--gutter)), 600px);
}
main { max-width: none; }
.screen { width: 100%; max-width: calc(460px + 2 * var(--gutter)); margin: 0 auto; }
#screen-home, #screen-history, #screen-account { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
body[data-tabs] .screen { padding-top: 88px; padding-bottom: 48px; }
body[data-tabs] h1 { font-size: 56px; }
.home .eyebrow-word, .history .eyebrow-word, .account .eyebrow-word { display: none; }
/* Top bars */
.topbar { max-width: calc(var(--wrap) + 2 * var(--gutter)); min-height: 64px; padding: 10px var(--gutter); }
.tabbar {
top: 0; bottom: auto; left: 0; right: 0; transform: none; width: auto;
align-items: center; gap: 4px; padding: 10px max(var(--gutter), calc((100% - var(--wrap)) / 2));
border: 0; border-radius: 0; box-shadow: none;
background: color-mix(in srgb, var(--bg) 78%, transparent);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.tabbar .tabbar-brand { display: block; flex: none; margin-right: auto; padding: 0; border-radius: 0; }
.tabbar-brand img { display: block; height: 44px; width: auto; }
.tabbar a[data-tab] {
flex: none; flex-direction: row; gap: 8px; min-height: 44px; padding: 0 16px;
font: 600 15px/1 var(--font); color: var(--ink-2); transition: background .2s, color .2s;
}
.tabbar a[data-tab]:hover { color: var(--ink); background: var(--surface-2); }
.tabbar a[data-tab][aria-current="page"] { color: var(--accent-text); background: color-mix(in srgb, var(--tomato) 13%, transparent); }
.tabbar a[data-tab] svg { width: 20px; height: 20px; }
/* Home: the two ways in side by side, Pro under them */
.home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 8px; }
.home > .home-head, .home > .pro-card, .home > .get-app { grid-column: 1 / -1; }
.home-head { justify-content: flex-start; align-items: center; gap: 24px; }
.home-head h1 { font-size: 64px; margin: 0; }
.home-mascot { width: 168px; margin: -8px 0 -16px; }
.start-card, .join-card { display: flex; flex-direction: column; padding: 28px 28px 24px; }
.start-card h2, .join-card h2 { font-size: 28px; }
.start-card .lede, .join-card .lede { font-size: 17px; }
.start-card .btn { margin-top: auto; }
/* The code field lines up with the Start swiping button (which has a fine line under it). */
.join-row { margin: auto 0 33px; }
.join-row .field-input { height: 56px; }
.join-row .btn { min-height: 56px; min-width: 104px; }
.home > .pro-card { padding: 20px 24px 20px 28px; gap: 16px; }
.pro-card .pro-card-title { font-size: 22px; }
.pro-card .pro-card-sub { font-size: 15.5px; }
.home > .pro-card img { width: 92px; }
/* History: title beside the sign-in nudge, matches in two columns */
.history { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 40px; align-content: start; padding-top: 8px; }
.history > * { grid-column: 1 / -1; }
.history > h1 { grid-column: 1; grid-row: 1; align-self: end; margin: 0 0 8px; }
.history > .lede { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 0; }
.history > .signin-nudge { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
.history-list { margin-top: 12px; }
.history-group { margin-top: 24px; }
.history-group .match-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.history > #history-empty { justify-self: center; width: 100%; max-width: 460px; }
/* Settings: the account and Pro side by side */
.screen > .account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-content: start; padding-top: 8px; }
.screen > .account > h1 { grid-column: 1 / -1; margin: 0; }
.screen > .account > .account-card { margin: 0; padding: 26px 28px; }
.screen > .account > .pro-card { padding: 26px 24px 26px 28px; }
.screen > .account > .account-links { grid-column: 1 / -1; margin-top: -8px; }
/* Filters: two columns, cuisines on the right */
#screen-setup { max-width: calc(960px + 2 * var(--gutter)); }
.setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; align-items: start; }
.setup > .setup-sec { grid-column: 1; }
.setup > .setup-sec:nth-of-type(5) { grid-column: 2; grid-row: 1 / span 5; }
.setup > .setup-cta { grid-column: 1 / -1; }
.setup-cta .btn { display: flex; width: min(100%, 460px); margin: 0 auto; }
/* Lobby: the invite on the left, who's in and the start button on the right */
#screen-lobby { max-width: calc(980px + 2 * var(--gutter)); }
.lobby { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; margin: auto 0; padding: 24px 0 40px; }
.lobby > * { grid-column: 1 / -1; }
.lobby h1 { font-size: 52px; }
.lobby > .invite-card { grid-column: 1; grid-row: 5 / span 3; align-self: start; padding: 24px; }
.lobby > .whos-in:nth-of-type(1) { grid-column: 2; grid-row: 5; margin-top: 4px; }
.lobby > .whos-in:nth-of-type(2) { grid-column: 2; grid-row: 6; }
.lobby > .lobby-cta { grid-column: 2; grid-row: 7; position: static; margin-top: 0; padding: 22px 0 0; }
.lobby .qr { width: 148px; height: 148px; padding: 10px; }
.lobby .invite-top { gap: 22px; }
.lobby .invite-code strong { font-size: 34px; }
/* The deck: one phone-shaped card, as big as the window height allows */
.deckbar { max-width: var(--deck-w); }
#screen-deck, #screen-done, #screen-waiting { max-width: var(--deck-w); }
/* Very tall windows: the card stops growing taller than a phone shape. */
.deck { max-height: calc((var(--deck-w) - 2 * var(--gutter)) / 0.62 + 18px); }
/* Match: the dish on the left, the place and buttons on the right */
.overlay-inner {
max-width: 940px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
column-gap: 56px; align-items: center;
}
.overlay-inner > * { grid-column: 2; }
.overlay-inner > .match-dish { grid-column: 1; grid-row: 1 / span 9; width: 100%; height: min(440px, 62vh); margin: 0; }
}