/* ── Breadcrumb link ── */
        .breadcrumb-link {
            font-size: 14px;
            font-weight: 600;
            color: #6b7280;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: color 0.2s;
        }
        .breadcrumb-link:hover {
            color: #111827;
        }
        .breadcrumb-link svg {
            width: 16px;
            height: 16px;
            margin-right: 6px;
        }

        /* ── Container ── */
        .home-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 2rem;
            max-width: 920px;
            margin-left: auto;
            margin-right: auto;
        }
        .error-badge {
            margin-bottom: 1.25rem;
            display: inline-block;
            padding: 0.75rem 1.25rem;
            background-color: #fef2f2;
            color: #b91c1c;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 12px;
            border: 1px solid #fee2e2;
        }

        /* Room card */
        .room-card {
            background: #ffffff;
            border: 1px solid rgba(168,144,96,0.14);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 12px 32px rgba(168,144,96,0.14);
            width: 100%;
            max-width: 420px;
            display: flex;
            flex-direction: column;
        }
        .room-card.admin {
            border-color: rgba(168,144,96,0.38);
            background: linear-gradient(160deg, #FDFAF3 0%, #ffffff 100%);
        }
        /* Card Banner */
        .card-banner {
            padding: 30px 24px 20px;
            border-bottom: 1px solid rgba(168,144,96,0.10);
            text-align: center;
        }
        .card-game-title {
            font-size: 24px;
            font-weight: 700;
            color: #3D3830;
            line-height: 1.4;
            letter-spacing: 0.01em;
            margin-bottom: 4px;
        }
        .card-game-title img {
            height: 44px;
            width: auto;
            max-width: 100%;
            object-fit: contain;
            display: block;
            margin: 0 auto 8px;
        }
        .card-room-name {
            font-size: 13px;
            color: #B0A898;
            font-weight: 400;
            letter-spacing: 0.06em;
            margin-bottom: 16px;
        }
        /* Status badge */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
        }
        .status-badge.available { background: rgba(134,163,109,0.11); color: #506040; border: 1px solid rgba(134,163,109,0.22); }
        .status-badge.in-use { background: rgba(210,100,114,0.10); color: #8C3E47; border: 1px solid rgba(210,100,114,0.22); }
        .status-badge.permanent { background: rgba(168,144,96,0.10); color: #7A6030; border: 1px solid rgba(168,144,96,0.25); }
        .pulse-dot { width: 6px; height: 6px; border-radius: 50%; }
        .pulse-dot.green { background: #86A36D; animation: pg 2s infinite; }
        .pulse-dot.red { background: #D26472; animation: pr 2s infinite; }
        .pulse-dot.gold { background: #C4A060; animation: pgold 2s infinite; }
        @keyframes pg { 0%,100%{box-shadow:0 0 0 0 rgba(134,163,109,0)} 50%{box-shadow:0 0 0 4px rgba(134,163,109,0.28)} }
        @keyframes pr { 0%,100%{box-shadow:0 0 0 0 rgba(210,100,114,0)} 50%{box-shadow:0 0 0 4px rgba(210,100,114,0.25)} }
        @keyframes pgold{ 0%,100%{box-shadow:0 0 0 0 rgba(168,144,96,0)} 50%{box-shadow:0 0 0 4px rgba(168,144,96,0.25)} }
        .admin-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            background: linear-gradient(135deg, #A89060, #D1BA8E);
            color: white;
            margin-left: 6px;
        }

        /* Card Form Area */
        .card-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
        .pw-label { font-size: 11px; font-weight: 700; color: #B0A898; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; display: block; text-align: left; }
        .pw-wrap { position: relative; }
        .pw-input {
            width: 100%; background: #FAFAF8; border: 1px solid rgba(168,144,96,0.18); border-radius: 12px;
            padding: 12px 40px 12px 16px; font-size: 14px; color: #3D3830; font-family: inherit; outline: none;
            transition: border-color 0.2s, background 0.2s;
        }
        .pw-input:focus { border-color: rgba(168,144,96,0.55); background: #fff; }
        .admin .pw-input { border-color: rgba(168,144,96,0.26); }
        .pw-toggle {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            background: none; border: none; cursor: pointer; color: #C0B8A8; display: flex; align-items: center; padding: 0;
            transition: color 0.2s;
        }
        .pw-toggle:hover { color: #3D3830; }

        .btn-primary {
            width: 100%; padding: 14px 16px; border-radius: 12px; font-size: 14px; font-weight: 700;
            font-family: inherit; letter-spacing: 0.03em; border: none; cursor: pointer;
            background: #3D3830; color: #fff; transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
        }
        .btn-primary:hover { background: #524E46; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
        .admin .btn-primary { background: linear-gradient(135deg, #A89060, #C8A870); }
        .admin .btn-primary:hover { filter: brightness(1.07); box-shadow: 0 4px 14px rgba(168,144,96,0.28); }

        .btn-secondary {
            width: 100%; padding: 14px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
            font-family: inherit; letter-spacing: 0.03em; border: 1px solid rgba(168,144,96,0.22);
            cursor: pointer; background: transparent; color: #7A7060; text-align: center; text-decoration: none;
            display: block; transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .btn-secondary:hover { background: rgba(168,144,96,0.06); border-color: rgba(168,144,96,0.4); color: #3D3830; }
        
        .section-title {
            font-size: 12px;
            font-weight: 700;
            color: #B0A898;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        .section-title::before, .section-title::after {
            content: "";
            flex: 1;
            height: 1px;
            background: rgba(168,144,96,0.15);
        }
        .section-title::before { margin-right: 12px; }
        .section-title::after { margin-left: 12px; }

        /* Share + room card side by side */
        .home-row {
            display: flex;
            gap: 1.25rem;
            align-items: stretch;
            justify-content: center;
            width: 100%;
        }
        .home-row .room-card {
            max-width: none;
            flex: 1;
            min-width: 0;
        }
        .home-row--solo {
            justify-content: center;
        }
        .home-row--solo .room-card {
            max-width: 420px;
        }
        @media (max-width: 720px) {
            .home-row {
                flex-direction: column;
                align-items: stretch;
            }
            .home-row .room-card {
                max-width: none;
            }
        }