/* The arcade's own screens (index.html): header, PCs, apps, settings, and
   the sign-in prompt everywhere. Loaded after windows7.css, whose rules are
   mostly !important, hence the "html body" prefix and !important here. */

:root {
    --ar-card: rgba(255, 255, 255, 0.95);
    --ar-border: rgba(15, 51, 95, 0.12);
    --ar-text: #10233b;
    --ar-muted: #5b6b80;
    --ar-accent: #1f6fd1;
    --ar-accent-soft: rgba(31, 111, 209, 0.1);
    --ar-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html body .top-line {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)) !important;
    background: rgba(8, 24, 48, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

html body .top-line h1 {
    margin: 0 !important;
    font: 800 26px var(--ar-font) !important;
    letter-spacing: -0.01em;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

html body .top-line-actions {
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}

.user-chip {
    order: 0;
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.92);
    font: 600 14px var(--ar-font);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.user-chip::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #3fb950;
    box-shadow: 0 0 6px #3fb950;
    vertical-align: middle;
}

.user-chip[hidden] {
    display: none;
}

/* Header and action buttons: labelled pills, icon on the left */
html body .logout-button,
html body .login-button,
html body .admin-button,
html body .open-settings,
html body .host-add,
html body .actions-list > button,
html body .logout-button:hover,
html body .login-button:hover,
html body .admin-button:hover,
html body .open-settings:hover,
html body .host-add:hover,
html body .actions-list > button:hover:not(:disabled) {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: 40px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #fff !important;
    text-shadow: none !important;
    font: 600 14px var(--ar-font) !important;
    transform: none !important;
    cursor: pointer;
}

html body .logout-button:hover,
html body .login-button:hover,
html body .admin-button:hover,
html body .open-settings:hover,
html body .host-add:hover,
html body .actions-list > button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

html body .admin-button { order: 1; }
html body .logout-button,
html body .login-button { order: 2; }

html body .host-add,
html body .host-add:hover {
    background: #2e9e4a !important;
    border-color: #2e9e4a !important;
}

html body .host-add:hover {
    background: #278a40 !important;
}

html body .logout-button::before,
html body .login-button::before,
html body .admin-button::before,
html body .open-settings::before,
html body .host-add::before {
    content: none !important;
    display: none !important;
}

html body .logout-button::after,
html body .login-button::after,
html body .admin-button::after,
html body .open-settings::after,
html body .host-add::after {
    position: static !important;
    order: -1;
    width: 18px !important;
    height: 18px !important;
    transform: none !important;
    background-size: 18px 18px !important;
    flex-shrink: 0;
}

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

html body .actions-list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 10px !important;
    padding: 20px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)) !important;
    margin: 0 !important;
}

.actions-list .page-title {
    order: -1;
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font: 700 24px var(--ar-font) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Back first, before the title */
html body .actions-list > button[data-variant="back-button"] {
    order: -2;
}

html body .actions-list > button[data-variant="back-button"]::before {
    content: "←";
    font-size: 16px;
}

html body .actions-list > button[data-variant="save-button"],
html body .actions-list > button[data-variant="save-button"]:hover:not(:disabled) {
    background: #fff !important;
    color: var(--ar-text) !important;
    border-color: #fff !important;
}

/* --------------------------------------------------------------- PCs */

html body .host-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin: 0 !important;
    padding: 12px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)) !important;
    max-width: 1240px;
}

html body .host-element,
html body .host-element:hover {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    border: 1px solid var(--ar-border) !important;
    border-radius: 18px !important;
    background: var(--ar-card) !important;
    box-shadow: 0 8px 24px rgba(8, 30, 60, 0.22) !important;
    transform: none !important;
    transition: transform 150ms ease, box-shadow 150ms ease !important;
}

html body .host-element:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 30px rgba(8, 30, 60, 0.3) !important;
}

.host-element > div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 16px 18px;
}

html body .host-image,
html body .host-element:hover .host-image {
    width: 76px !important;
    height: 76px !important;
    padding: 14px;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #2f7fdb 0%, #1d5aa6 100%) !important;
    box-shadow: 0 6px 16px rgba(29, 90, 166, 0.35) !important;
    transform: none !important;
    box-sizing: border-box;
}

.host-image-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
}

.host-image-overlay:not([src]),
.host-image-overlay[src=""] {
    display: none;
}

html body .host-name {
    margin: 4px 0 0 !important;
    color: var(--ar-text) !important;
    font: 700 16px var(--ar-font) !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}

.host-element > div::after {
    content: "Checking…";
    color: var(--ar-muted);
    font: 600 12.5px var(--ar-font);
}

.host-element > div[data-state="online"]::after {
    content: "● Ready to play";
    color: #1f8a3a;
}

.host-element > div[data-state="busy"]::after {
    content: "● Playing now";
    color: #1f6fd1;
}

.host-element > div[data-state="offline"]::after {
    content: "● Offline";
    color: #9aa7b6;
}

.host-element > div[data-state="unpaired"]::after {
    content: "🔒 Not paired: tap to pair";
    color: #a86b00;
}

/* -------------------------------------------------------------- apps */

html body .app-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px !important;
    margin: 0 !important;
    padding: 12px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)) !important;
    max-width: 1240px;
}

html body .app-element,
html body .app-element:hover {
    flex: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

html body .app-element > div {
    position: relative;
    margin: 0 !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(8, 30, 60, 0.35);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease, opacity 150ms ease !important;
}

html body .app-element > div:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 34px rgba(8, 30, 60, 0.45);
}

html body .app-image {
    display: block;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body .app-active .app-image {
    border: none !important;
    box-shadow: none !important;
}

html body .app-element > div.app-active {
    box-shadow: 0 0 0 3px #3fb950, 0 12px 30px rgba(8, 30, 60, 0.45);
}

html body .app-element > div.app-active::after {
    content: "● Running";
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #1f8a3a;
    color: #fff;
    font: 700 12px var(--ar-font);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Someone else's game (component/game/index.js): in use, not yours */
html body .app-element > div.app-active.app-in-use {
    box-shadow: 0 0 0 3px #d4a72c, 0 12px 30px rgba(8, 30, 60, 0.45);
}

html body .app-element > div.app-active.app-in-use::after {
    content: "● In use · " attr(data-owner);
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #9a6b00;
}

html body .app-inactive {
    filter: grayscale(0.7) !important;
    opacity: 0.55;
}

/* The settings screen's styles are in settings.css. */

/* ------------------------------------------------------------ sign in */

html body #modal-parent:has(.luma-login) {
    width: min(400px, calc(100vw - 32px)) !important;
    max-height: none !important;
    padding: 28px 28px 24px !important;
    border-radius: 20px !important;
    border: none !important;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}

html body #modal-parent:has(.luma-login)::before {
    display: none !important;
}

.luma-login {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ar-text);
    font-family: var(--ar-font);
}

.luma-login-brand {
    color: var(--ar-accent);
    font: 800 13px var(--ar-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

html body .luma-login h3 {
    margin: -6px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: var(--ar-text) !important;
    font: 800 26px var(--ar-font) !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

.luma-login-subtitle {
    margin: -8px 0 4px !important;
    color: var(--ar-muted);
    font-size: 14px;
}

html body .luma-login .luma-login-field {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ar-text) !important;
    font: 600 13.5px var(--ar-font) !important;
}

html body .luma-login .luma-login-field input {
    width: 100% !important;
    box-sizing: border-box;
    height: 44px;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid #c9d5e3 !important;
    background: #f8fafd !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    font: 16px var(--ar-font) !important;
}

html body .luma-login .luma-login-field input:focus {
    outline: 3px solid rgba(31, 111, 209, 0.25);
    border-color: var(--ar-accent) !important;
    background: #fff !important;
}

html body .luma-login button,
html body .luma-login button:hover:not(:disabled) {
    width: 100%;
    height: 46px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font: 700 15px var(--ar-font) !important;
    transform: none !important;
}

html body .luma-login .luma-login-submit,
html body .luma-login .luma-login-submit:hover:not(:disabled) {
    margin-top: 6px !important;
    border: none !important;
    background: var(--ar-accent) !important;
    color: #fff !important;
}

html body .luma-login .luma-login-submit:hover:not(:disabled) {
    background: #185cb0 !important;
}

html body .luma-login .luma-login-forgot {
    justify-self: end;
    align-self: flex-end;
    margin-top: -4px;
    color: var(--ar-accent) !important;
    font: 600 13px var(--ar-font);
    text-decoration: none;
    text-shadow: none !important;
}

html body .luma-login .luma-login-forgot:hover,
html body .luma-login .luma-login-forgot:focus-visible {
    text-decoration: underline;
}

html body .luma-login .luma-login-cancel,
html body .luma-login .luma-login-cancel:hover:not(:disabled) {
    height: 40px;
    border: none !important;
    background: transparent !important;
    color: var(--ar-muted) !important;
    font-weight: 600 !important;
}

/* ------------------------------------------------------------ dialogs
   Every other dialog (Add PC, details, prompts, messages): the same white
   card as sign in, instead of windows7.css's Aero window with its fake
   "Luma Arcade" title bar. Sign in and the stream page's connect screen
   have their own look (the :not(:has()) keeps these rules off them). */
html body #modal-overlay {
    background-color: rgba(6, 18, 34, 0.55) !important;
    backdrop-filter: blur(6px) !important;
}

/* (The Home prompt and window picker size themselves, luma.css.) */
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal, .luma-home-modal, .luma-windows-modal)) {
    width: fit-content !important;
    min-width: min(360px, calc(100vw - 32px));
    max-width: min(560px, calc(100vw - 32px)) !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) {
    max-height: calc(100vh - 48px) !important;
    margin: max(48px, 12vh) auto 24px !important;
    padding: 24px 24px 20px !important;
    box-sizing: border-box;
    border-radius: 20px !important;
    border: none !important;
    background: #fff !important;
    backdrop-filter: none !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
    color: var(--ar-text) !important;
    font-family: var(--ar-font);
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal))::before,
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal))::after {
    display: none !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) h2,
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) h3 {
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: var(--ar-text) !important;
    font: 800 22px var(--ar-font) !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) p,
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) label {
    color: var(--ar-text) !important;
    text-shadow: none !important;
    font-family: var(--ar-font) !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > p,
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form > p {
    margin: 0 0 16px !important;
    font-size: 15px !important;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Labelled fields (component/input.js): label above the box. */
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form .input-div {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form .input-div label {
    margin: 0 !important;
    font: 600 13.5px var(--ar-font) !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form input:not([type="checkbox"]):not([type="radio"]),
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form select {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid #c9d5e3 !important;
    background: #f8fafd !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    font: 16px var(--ar-font) !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form input:focus,
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form select:focus {
    outline: 3px solid rgba(31, 111, 209, 0.25);
    border-color: var(--ar-accent) !important;
    background: #fff !important;
}

/* OK first (blue), then Cancel; a message's single OK is blue too. */
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form > button,
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > button {
    min-width: 96px;
    height: 42px;
    margin: 6px 8px 0 0 !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    border: 1px solid #c9d5e3 !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: var(--ar-text) !important;
    font: 700 15px var(--ar-font) !important;
    transform: none !important;
    cursor: pointer;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form > button:hover:not(:disabled),
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > button:hover:not(:disabled) {
    background: #f0f4f9 !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form > button[type="submit"],
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > button:only-of-type {
    border-color: var(--ar-accent) !important;
    background: var(--ar-accent) !important;
    color: #fff !important;
}

html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > form > button[type="submit"]:hover:not(:disabled),
html body #modal-parent:not(:has(.luma-login, .luma-connect, .luma-quality-modal)) > button:only-of-type:hover:not(:disabled) {
    background: #185cb0 !important;
}

/* "Key: value" messages (PC and app details, component/modal/index.js). */
.modal-details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0;
    margin: 0 0 18px;
    border: 1px solid var(--ar-border);
    border-radius: 12px;
    overflow: hidden;
    font: 14px var(--ar-font);
}

.modal-details dt,
.modal-details dd {
    margin: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--ar-border);
}

.modal-details dt {
    color: var(--ar-muted);
    font-weight: 600;
    background: #f6f8fb;
}

.modal-details dd {
    color: var(--ar-text);
    overflow-wrap: anywhere;
}

.modal-details dt:first-of-type,
.modal-details dd:first-of-type {
    border-top: none;
}

/* ------------------------------------------------------------ right-click menu */
html body .context-menu-background {
    min-width: 180px;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid var(--ar-border) !important;
    background: #fff !important;
    backdrop-filter: none !important;
    box-shadow: 0 16px 40px rgba(4, 18, 38, 0.3) !important;
    font-family: var(--ar-font);
}

html body .context-menu-list {
    margin: 0 !important;
    padding: 0 !important;
}

html body .context-menu-element,
html body .context-menu-element:hover {
    padding: 9px 12px !important;
    border: none !important;
    border-radius: 9px !important;
    transform: none !important;
    color: var(--ar-text) !important;
    font: 600 14.5px var(--ar-font) !important;
}

html body .context-menu-element:hover {
    background: var(--ar-accent-soft) !important;
    color: var(--ar-accent) !important;
}

html body .context-menu-element-red,
html body .context-menu-element-red:hover {
    color: #c62f2f !important;
}

html body .context-menu-element-red:hover {
    background: #fdecec !important;
}

/* "Add PC" is the main action on the PCs screen */
html body .actions-list > button.host-add,
html body .actions-list > button.host-add:hover:not(:disabled) {
    background: #2e9e4a !important;
    border-color: #2e9e4a !important;
}

html body .actions-list > button.host-add:hover:not(:disabled) {
    background: #278a40 !important;
}

/* The status line says it all; the old white overlay icons vanish on a
   white card. Offline PCs fade back. */
html body .host-image-overlay {
    display: none !important;
}

.host-element > div[data-state="offline"] .host-image {
    filter: grayscale(1);
    opacity: 0.55;
}

/* windows7.css sizes inputs inside the modal by id */
html body #modal-parent .luma-login .luma-login-field input {
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
}

/* Busy PCs say whose game it is (component/session_status.js) */
.host-element > div[data-state="busy"][data-busy-text]::after {
    content: attr(data-busy-text);
}

.host-element > div.host-in-use::after {
    color: #a86b00 !important;
}

/* ---- Home feed (component/home_feed.js): announcements, co-op invites and
   play time left, under the top bar. Empty parts take no space. */
.luma-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto 12px;
    padding: 0 16px;
    font-family: var(--ar-font);
}

.luma-feed:not(:has(.luma-feed-card, .luma-feed-continue-card)):has(.luma-feed-time[hidden]) {
    display: none;
}

.luma-feed-continue,
.luma-feed-announcements,
.luma-feed-invites {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.luma-feed-announcements:empty,
.luma-feed-invites:empty {
    display: none;
}

.luma-feed-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 16px;
    border-radius: 12px;
    background: var(--ar-card);
    border: 1px solid var(--ar-border);
    box-shadow: 0 6px 18px rgba(8, 30, 60, 0.14);
    color: var(--ar-text);
}

.luma-feed-continue:empty {
    display: none;
}

/* "Continue playing": a dark hero card over the game's own cover, blurred. */
.luma-feed-continue-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 104px;
    padding: 14px 18px 14px 14px;
    border-radius: 16px;
    background: linear-gradient(120deg, #0d2742 0%, #123a63 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(4, 18, 38, 0.35);
    color: #fff;
}

.luma-continue-backdrop {
    position: absolute;
    inset: -40px;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(1.3);
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.4s ease;
}

.luma-feed-continue-card.has-cover .luma-continue-backdrop {
    opacity: 0.75;
}

/* Keeps the text readable whatever colour the cover is. */
.luma-feed-continue-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(6, 18, 34, 0.55) 0%, rgba(6, 18, 34, 0.78) 55%, rgba(6, 18, 34, 0.88) 100%);
}

.luma-continue-cover {
    flex: 0 0 auto;
    width: 76px;
    height: 104px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    outline: 1px solid rgba(255, 255, 255, 0.15);
}

.luma-continue-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.luma-continue-eyebrow {
    font: 700 11px var(--ar-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7ee2a0;
}

.luma-continue-title {
    font: 800 22px/1.2 var(--ar-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.luma-continue-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}

.luma-feed button.luma-continue-play {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px 12px 20px !important;
    border-radius: 999px !important;
    border: none !important;
    background: #2da44e !important;
    color: #fff !important;
    font: 700 16px var(--ar-font) !important;
    box-shadow: 0 6px 18px rgba(45, 164, 78, 0.45) !important;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.luma-feed button.luma-continue-play:hover {
    background: #34b958 !important;
    transform: translateY(-1px);
}

.luma-feed button.luma-continue-play:active {
    transform: translateY(0);
}

.luma-feed button.luma-continue-play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.luma-continue-play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent currentColor;
}

.luma-feed-announcement {
    border-left: 4px solid #e3a008;
}

.luma-feed-invite {
    border-left: 4px solid var(--ar-accent);
}

.luma-feed-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-wrap: anywhere;
}

.luma-feed-text strong {
    font-size: 15px;
}

.luma-feed-text span {
    color: var(--ar-muted);
    font-size: 12.5px;
}

.luma-feed-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.luma-feed button {
    margin: 0 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ar-border) !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    font: 600 13.5px var(--ar-font) !important;
    cursor: pointer;
}

.luma-feed button.luma-feed-primary {
    background: var(--ar-accent) !important;
    border-color: var(--ar-accent) !important;
    color: #fff !important;
}

.luma-feed button.luma-feed-x {
    align-self: flex-start;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ar-muted) !important;
}

.luma-feed-time {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ar-card);
    border: 1px solid var(--ar-border);
    color: var(--ar-text);
    font: 600 13px var(--ar-font);
}

.luma-feed-time[hidden] {
    display: none;
}

.luma-feed-time[data-out="true"] {
    background: #fde2e1;
    color: #8f1f19;
}

@media (max-width: 560px) {
    .luma-feed-card {
        flex-wrap: wrap;
    }

    .luma-feed-actions {
        width: 100%;
    }

    .luma-feed-actions button {
        flex: 1;
    }

    .luma-feed-continue-card {
        gap: 14px;
        padding: 12px;
    }

    .luma-continue-cover {
        width: 60px;
        height: 82px;
    }

    .luma-continue-title {
        font-size: 18px;
        white-space: normal;
    }

    .luma-feed button.luma-continue-play {
        padding: 12px !important;
    }

    .luma-continue-play > span:last-child {
        display: none;
    }
}

/* ---- My saves (component/saves_settings.js) */
.luma-saves-list .set-row:first-child {
    border-top: none;
}

/* ---- "My play" in the settings screen (component/my_play.js) */

html body .settings .luma-play-summary {
    margin: 0;
    padding: 4px 18px 12px;
    font-size: 14px;
}

.luma-play-games {
    display: grid;
    gap: 10px;
    padding: 0 18px 16px;
}

.luma-play-games:empty {
    display: none;
}

.luma-play-game {
    display: flex;
    align-items: center;
    gap: 12px;
}

.luma-play-cover {
    flex: 0 0 36px;
    height: 48px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--ar-accent-soft);
}

.luma-play-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.luma-play-text {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 5px;
}

.luma-play-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
}

.luma-play-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.luma-play-time {
    flex-shrink: 0;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.luma-play-track {
    height: 6px;
    border-radius: 3px;
    background: var(--ar-accent-soft);
    overflow: hidden;
}

.luma-play-track > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ar-accent);
}

/* ------------------------------------------------------------ toasts */
/* component/notification.js. Small and out of the way over a game: a
   dark pill at the top centre, coloured by kind. */

#notification-list {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.lt-toasts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.lt-toast {
    --lt-color: #5aa7f7;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 7px 12px 7px 9px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--lt-color) 45%, transparent);
    border-left: 3px solid var(--lt-color);
    background: rgba(12, 18, 28, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    color: #eef3f9;
    font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-shadow: none;
    cursor: pointer;
    animation: lt-in 180ms ease-out;
}

.lt-toast.lt-error { --lt-color: #f0625d; }
.lt-toast.lt-warn { --lt-color: #f2b233; }
.lt-toast.lt-info { --lt-color: #5aa7f7; }
.lt-toast.lt-success { --lt-color: #3fcf6c; }
.lt-toast.lt-controller { --lt-color: #b48cff; }
.lt-toast.lt-quality { --lt-color: #2fd3c4; }

.lt-icon {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--lt-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lt-text {
    min-width: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lt-count {
    flex: none;
    color: var(--lt-color);
    font-weight: 700;
    font-size: 12px;
}

.lt-count:empty {
    display: none;
}

.lt-toast.lt-bump {
    animation: lt-bump 220ms ease-out;
}

.lt-toast.lt-leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

@keyframes lt-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@keyframes lt-bump {
    50% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    .lt-toast, .lt-toast.lt-bump { animation: none; }
    .lt-toast.lt-leaving { transform: none; }
}