/* styles.css — Core layout and components */

:root {
    --accent: rgb(242, 115, 77);
    --accent-rgb: 242, 115, 77;
    --accent-secondary: rgb(51, 140, 184);
    --accent-secondary-rgb: 51, 140, 184;
    --completed: rgb(77, 179, 102);
    --completed-rgb: 77, 179, 102;
    --budget: rgb(77, 179, 102);
    --warning: rgb(242, 153, 51);
    --danger: rgb(230, 77, 64);
    --danger-rgb: 230, 77, 64;
    --card-bg: rgb(255, 247, 237);
    --page-bg: rgb(255, 242, 224);
    --header-grad-start: rgb(242, 115, 77);
    --header-grad-end: rgb(242, 179, 64);
    --text: #1a1a1a;
    --text-secondary: #666;
    --border: rgba(0, 0, 0, 0.08);
    --radius: 20px;
    --radius-sm: 14px;

    /* ---- the scales ----
     *
     * Everything below this line existed as loose numbers before: eighteen
     * distinct spacing values across seven stylesheets, including 5, 7, 9, 11,
     * 13 and 15px, which is what eyeballing looks like when you collect it in
     * one place. A four-pixel scale is not a style; it is what stops each
     * screen being a slightly different app.
     */

    /* Spacing, 4px scale. Named by step, not by intent, because the same gap
       does different jobs in different places and intent names go stale. */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s7: 32px;
    --s8: 40px;

    /* Radii. Three plus a pill — a fourth value never earns itself. */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 999px;

    /* Type. One display, one title, one body, two smaller. Line heights are
       part of the scale rather than an afterthought: they are most of why
       text either sits on a grid or drifts. */
    --t-display: 30px;   --lh-display: 1.15;
    --t-title:   20px;   --lh-title:   1.25;
    --t-lead:    17px;   --lh-lead:    1.35;
    --t-body:    15px;   --lh-body:    1.5;
    --t-caption: 13px;   --lh-caption: 1.4;
    --t-micro:   11.5px; --lh-micro:   1.3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

.hidden { display: none !important; }

.screen {
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

/* ============ AUTH ============ */

#auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg);
    overflow: hidden;
    position: relative;
}

/* Bubbling hearts */
.hearts-bg {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    pointer-events: none;
    z-index: 0;
}

.auth-container {
    position: relative;
    z-index: 1;
}

.float-heart {
    position: absolute;
    bottom: -5%;
    animation: floatUp linear infinite;
}

.title-heart {
    font-size: 28px;
    display: inline-block;
    animation: heartPulse 1.5s ease-in-out infinite;
}

@keyframes floatUp {
    0% {
        opacity: 0.8;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translateY(-110vh) rotate(15deg);
    }
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.auth-container {
    width: 100%;
    max-width: 380px;
    padding: var(--s6);
    text-align: center;
}

.auth-logo {
    margin-bottom: var(--s7);
}

.auth-icon {
    font-size: 56px;
    margin-bottom: var(--s2);
}

.auth-logo h1 {
    font-size: 32px;
    font-weight: 700;
}

.auth-logo p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: var(--s1);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.auth-form input {
    padding: var(--s3) var(--s4);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    font-size: 16px;
    background: white;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form input:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.auth-form input:focus {
    border-color: var(--accent);
}

.auth-error {
    color: var(--danger);
    font-size: 13px;
    line-height: 1.45;
}

/* Same element, used for non-error feedback such as "check your email". */
.auth-error.auth-notice {
    color: var(--text);
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    border-radius: var(--radius-sm);
    padding: var(--s2) var(--s3);
}

/* Sharing */

.share-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 2px var(--s2);
    border-radius: 50px;
    background: rgba(var(--accent-secondary-rgb), 0.15);
    color: var(--accent-secondary);
    vertical-align: middle;
    white-space: nowrap;
}

.share-badge.incoming {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}

.share-list {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    margin-bottom: var(--s2);
}

.share-row,
.share-note {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    font-size: 14px;
}

.share-note {
    align-items: flex-start;
    line-height: 1.45;
    margin-bottom: var(--s2);
}

.share-avatar { font-size: 16px; flex-shrink: 0; }

.share-who {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-remove { flex-shrink: 0; }

.share-invite {
    display: flex;
    gap: var(--s2);
}

.share-invite input {
    flex: 1;
    min-width: 0;
}

.share-invite .btn-secondary {
    flex-shrink: 0;
    width: auto;
    padding: 0 var(--s4);
}

.share-error {
    color: var(--danger);
    font-size: 13px;
    line-height: 1.4;
    margin-top: var(--s2);
}

/* Home grouping header in the Room tab */

.home-group-header {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: var(--s4) 2px var(--s2);
    padding: var(--s1) 2px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
}

.home-group-header:first-child { margin-top: var(--s1); }
.home-group-header:not([onclick]) { cursor: default; }

.home-group-header .home-icon { font-size: 17px; }

.home-group-header .home-photo {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    object-fit: cover;
}

.home-group-header .home-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unsaved-writes indicator. Pinned to the viewport rather than to one app's
   header, because every app queues its writes now. Silent when all is saved. */
.sync-status {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* clear of the per-app toasts, which are also bottom-centred */
    bottom: 68px;
    z-index: 90;
    border: none;
    font: inherit;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: var(--s2) var(--s4);
    border-radius: 50px;
    background: rgba(24, 16, 30, 0.9);
    color: rgba(255, 255, 255, 0.95);
    pointer-events: none;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}

.sync-status.offline,
.sync-status.error,
.sync-status.refused {
    background: var(--danger);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
}

.auth-form.busy {
    opacity: 0.75;
    pointer-events: none;
}

.auth-form button[disabled] {
    opacity: 0.8;
    cursor: progress;
}

.btn-primary {
    padding: var(--s3);
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
}

.btn-primary:active { transform: scale(0.97); }

.btn-primary:hover { opacity: 0.9; }

.btn-text {
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    margin-top: var(--s3);
}

/* ============ HEADER ============ */

#app-header {
    background: var(--accent);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: env(safe-area-inset-top, 0) 0 0 0;
}

/* The back and + buttons belong together on the left; space-between alone
   pushed them apart into an awkward gap. */
.header-left {
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) var(--s4);
    max-width: 800px;
    margin: 0 auto;
}

.header-title {
    font-size: 20px;
    font-weight: 700;
}

.header-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.header-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============ FILTER BAR ============ */

.filter-bar {
    display: flex;
    padding: var(--s2) var(--s4);
    gap: var(--s1);
    background: var(--page-bg);
    position: sticky;
    top: 60px;
    z-index: 90;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    /* Tabs grow to fill on desktop, scroll instead of clipping on narrow phones */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    flex: 1 0 auto;
    white-space: nowrap;
    padding: var(--s2) var(--s3);
    border: 1.5px solid var(--border);
    background: white;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.filter-tab.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* ============ MAIN CONTENT ============ */

#main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--s2) var(--s4) var(--s8);
    position: relative;
    z-index: 1;
}

.empty-state {
    text-align: center;
    padding: var(--s8) var(--s6);
    color: var(--text-secondary);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: var(--s4);
}

.empty-state h3 {
    font-size: 18px;
    color: var(--text);
    margin-bottom: var(--s2);
}

/* ============ SECTIONS ============ */

.section {
    background: white;
    border-radius: var(--radius);
    margin-bottom: var(--s3);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
}

.section-header:hover { background: rgba(0, 0, 0, 0.02); }

.section-photo {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
}

.section-edit {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.5;
}

/* ============ LIST ROWS ============ */

.list-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s4);
    cursor: pointer;
    transition: background 0.15s;
    border-top: 1px solid var(--border);
}

.list-row:first-child { border-top: none; }
.list-row:hover { background: rgba(0, 0, 0, 0.02); }

.row-thumb {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}

.row-thumb.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- painted thumbnails ----------
 * A picture of the thing, over the emoji rather than instead of it: a row kind
 * or item type with nothing painted for it shows its glyph and reads exactly
 * as it did before, and UI.art takes the image away again if it fails to load.
 *
 * The art is authored at 48px and `max-width` stops it being stretched past
 * that, because .row-thumb is not one size: responsive.css makes it 56px from
 * 600px up and 40px under 380px, and no single source size is an integer
 * multiple of 40, 48 and 56. Capping it means it draws exactly 1:1 at the two
 * common sizes — at 56 it simply sits in 4px of breathing room, which suits
 * the rounded corners — and only the narrow-phone case scales it down.
 *
 * There is deliberately no padding either: insetting it even 2px would fit
 * 48px of art into 44px, and a fractional downscale drops pixel rows unevenly,
 * which is exactly what stops pixel art looking like pixel art. Keeping the
 * corners clear of the 16px radius is the *artwork's* job — leave a margin
 * when drawing it, rather than squeezing it here. */
.row-thumb { position: relative; overflow: hidden; }

/* The sub-room glyph sits inline in a flex header rather than in a thumb box,
   so it is given one — 28px, matching .sub-photo beside it — for the painted
   door to be positioned against. */
.sub-thumb {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.thumb-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 48px;                 /* the size the art is drawn at */
    max-height: 48px;
    margin: auto;                    /* centred when the box is bigger */
    object-fit: contain;
    image-rendering: pixelated;      /* pixel art, never smoothed */
}


.row-info {
    flex: 1;
    min-width: 0;
}

.row-title {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--s1);
}

.row-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.row-subtitle .dot { color: var(--text-secondary); }

.row-goal {
    font-size: 11px;
    color: var(--warning);
    margin-top: 2px;
}

.row-goal.past-due {
    color: var(--danger);
}

.completed-badge {
    color: var(--completed);
    font-size: 12px;
}

.completed-icon {
    color: var(--completed);
    font-size: 24px;
}

.project-icon {
    color: var(--accent);
    font-size: 24px;
}

.diy-badge {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    padding: 2px var(--s2);
    border-radius: 50px;
    font-size: 10px;
    font-weight: 600;
}

.budget-text {
    color: var(--budget);
    font-weight: 500;
}

/* ============ SUB-ROOMS ============ */

.sub-room-group {
    border-top: 1px solid var(--border);
}

.sub-room-header {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4) var(--s2) var(--s6);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.sub-room-header:hover { background: rgba(0, 0, 0, 0.02); }

.sub-photo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.sub-icon {
    font-size: 16px;
    opacity: 0.5;
}

.sub-room-header .badge {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
}

.chevron {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.sub-room-group.expanded .chevron {
    transform: rotate(90deg);
}

.sub-room-content {
    display: none;
    padding-left: var(--s4);
}

.sub-room-group.expanded .sub-room-content {
    display: block;
}

.sub-room-actions {
    display: none;
    padding: var(--s1) var(--s4) var(--s2) var(--s6);
}

.sub-room-group.expanded .sub-room-actions {
    display: block;
}

.empty-note {
    padding: var(--s3) var(--s4);
    font-size: 13px;
    color: var(--text-secondary);
}

/* ============ DROPDOWN MENU ============ */

.dropdown-menu {
    position: fixed;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 200;
    min-width: 200px;
    overflow: hidden;
}

.dropdown-menu button {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    padding: var(--s3) var(--s4);
    border: none;
    background: none;
    font-size: 15px;
    cursor: pointer;
    text-align: left;
}

.dropdown-menu button:hover {
    background: rgba(var(--accent-rgb), 0.06);
}

.menu-icon { font-size: 16px; }

.menu-divider {
    height: 1px;
    background: var(--border);
    margin: var(--s1) 0;
}

.submenu {
    position: relative;
}

.submenu-trigger {
    width: 100%;
}

.submenu-items {
    display: none;
    padding-left: var(--s3);
    background: rgba(0, 0, 0, 0.02);
}

.submenu:hover .submenu-items,
.submenu:focus-within .submenu-items {
    display: block;
}

.submenu-items button {
    font-size: 14px;
    padding: var(--s2) var(--s4);
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
}

/* ============ PATTERN CANVAS ============ */

#pattern-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ============ BADGES ============ */

.badge {
    display: inline-block;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px var(--s2);
    border-radius: 50px;
}

/* ============ BUTTONS ============ */

.btn-secondary {
    padding: var(--s2) var(--s4);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: var(--s2);
    transition: background 0.2s, transform 0.15s;
}

.btn-secondary:active { transform: scale(0.97); }

.btn-secondary:hover { background: rgba(var(--accent-rgb), 0.15); }

.btn-danger {
    width: 100%;
    padding: var(--s3);
    background: none;
    color: var(--danger);
    border: 1.5px solid rgba(230, 77, 64, 0.3);
    border-radius: 50px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger:hover { background: rgba(230, 77, 64, 0.05); }

.btn-completed {
    width: 100%;
    padding: var(--s3);
    background: none;
    color: var(--completed);
    border: 1.5px solid rgba(77, 179, 102, 0.3);
    border-radius: 50px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-small {
    padding: var(--s1) var(--s3);
    font-size: 12px;
    border: 1.5px solid var(--border);
    background: white;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger-small {
    color: var(--danger);
    border-color: rgba(230, 77, 64, 0.3);
}

.btn-accent {
    padding: var(--s2) var(--s4);
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

.btn-accent:active { transform: scale(0.95); }

.btn-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 16px;
    padding: var(--s1) var(--s2);
}

/* ============ INFO PAGE ============ */

.info-page {
    padding-bottom: var(--s6);
}

.info-hero {
    text-align: center;
    padding: var(--s7) var(--s4) var(--s6);
}

.info-hero-icon {
    font-size: 56px;
    display: block;
    margin-bottom: var(--s3);
}

.info-hero h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: var(--s2);
}

.info-hero p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 440px;
    margin: 0 auto;
}

.info-section .info-content {
    padding: var(--s3) var(--s4) var(--s4);
}

.info-content p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: var(--s2);
    color: var(--text);
}

.info-content p:last-child {
    margin-bottom: 0;
}

.info-list {
    list-style: none;
    margin: var(--s2) 0 var(--s3);
    padding: 0;
}

.info-list li {
    font-size: 14px;
    line-height: 1.5;
    padding: var(--s1) 0 var(--s1) var(--s5);
    position: relative;
    color: var(--text);
}

.info-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* Example tree */
.info-example {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: var(--s3) var(--s4);
    margin: var(--s3) 0;
}

.info-example-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--s2);
}

.info-tree-item {
    font-size: 14px;
    padding: var(--s1) 0;
}

.info-tree-item.indented {
    padding-left: var(--s6);
    color: var(--text-secondary);
}

/* Walkthrough steps */
.info-walkthrough {
    margin-top: var(--s3);
}

.info-step {
    display: flex;
    gap: var(--s3);
    margin-bottom: var(--s5);
}

.info-step:last-child {
    margin-bottom: 0;
}

.info-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-step-body {
    flex: 1;
    min-width: 0;
}

.info-step-body h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--s1);
}

.info-step-body p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--s2);
}

/* Task demo */
.info-task-demo {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: var(--s2) var(--s3);
    margin: var(--s2) 0 var(--s2);
}

.info-task {
    font-size: 13px;
    padding: var(--s1) 0;
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.info-task s {
    color: var(--text-secondary);
}

.info-check {
    font-size: 14px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.info-check.done {
    color: var(--completed);
    font-weight: 700;
}

/* "Keep private for me" toggle */
.privacy-toggle {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}

.privacy-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

/* ============ APP PICKER ============ */

#picker-screen {
    background: var(--page-bg);
    padding: var(--s6) var(--s5) var(--s8);
}

.picker-wrap {
    max-width: 680px;
    margin: 0 auto;
}

.picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s5);
}

.picker-head h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.picker-profile {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
}

.picker-profile:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }

.app-grid {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.app-card {
    display: flex;
    align-items: center;
    gap: var(--s4);
    width: 100%;
    text-align: left;
    padding: var(--s4);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.16s, box-shadow 0.22s, border-color 0.2s;
}

.app-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.app-card:active { transform: scale(0.99); }

.app-card-icon {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}

.app-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.app-card-name { font-size: 18px; font-weight: 800; color: var(--text); }

.app-card-tagline {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.app-card-blurb {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin-top: 3px;
}

.app-card-go {
    font-size: 26px;
    color: var(--text-secondary);
    flex-shrink: 0;
    opacity: 0.5;
}

/* Bar shown above the two games */
.app-bar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--accent);
    color: white;
}

.app-bar-title { font-size: 17px; font-weight: 700; flex: 1; text-align: center; }
.app-bar-spacer { width: 68px; flex-shrink: 0; }

.app-back {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: white;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: var(--s2) var(--s3);
    border-radius: 50px;
    cursor: pointer;
    flex-shrink: 0;
    width: 68px;
}

.app-back:hover { background: rgba(255, 255, 255, 0.3); }

.app-back-icon {
    font-size: 24px;
    line-height: 1;
    padding-bottom: 3px;
}

/* The two games fill the screen rather than sitting inside a tab */
.full-host {
    height: calc(100vh - 54px);
    height: calc(100dvh - 54px);
    min-height: 320px;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 480px) {
    .picker-head h1 { font-size: 25px; }
    .app-card { padding: var(--s3); gap: var(--s3); }
    .app-card-icon { width: 52px; height: 52px; font-size: 25px; border-radius: 15px; }
    .app-card-blurb { display: none; }
}

/* Search across the account. Sticks directly beneath the filter tabs, which
   are themselves sticky — without this it scrolls up underneath them. */
.search-bar {
    background: var(--page-bg);
    padding: 0 var(--s4) var(--s2);
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Tabs + search are one sticky unit, so the search field cannot slide under
   the tabs when the list scrolls. */
.toolbar-sticky {
    position: sticky;
    top: 60px;
    z-index: 90;
    background: var(--page-bg);
}
.toolbar-sticky .filter-bar { position: static; top: auto; z-index: auto; }
.search-bar input {
    width: 100%;
    padding: var(--s2) var(--s4);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    font-size: 15px;
    font-family: inherit;
    background: var(--card);
    color: inherit;
    outline: none;
}
.search-bar input:focus { border-color: var(--accent); }

/* ---------- painted picker icons ----------
 * The emoji stays underneath as the fallback — it needs no network and no
 * font we do not already have — and the painted icon covers it. If the art
 * fails to load the img removes itself and the emoji is simply there, so the
 * picker degrades to exactly what it was rather than to empty squares. */
.app-card-icon { position: relative; overflow: hidden; }

.app-card-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;      /* pixel art, never smoothed */
    /* A little room so a 64px icon is not jammed into the corners of a 62px
       tile, and a shadow so it sits on the coloured square rather than floating. */
    padding: 3px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.22));
}

/* The tile press already scales the whole card; the art must not fight it. */
.app-card:active .app-card-art { transform: none; }