/**
 * background-card-styles.ts - Shadow DOM CSS for <background-card>
 *
 * Ported from the working Ringmaster BackgroundCard.svelte CSS.
 * Uses :host for the outer element, ::slotted for light DOM icon content,
 * and ::part attributes for consumer-side style overrides.
 */
export declare const BACKGROUND_CARD_STYLES = "\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    aspect-ratio: 4 / 3;\n    min-height: 80px;\n    border-radius: 12px;\n    overflow: hidden;\n    cursor: pointer;\n    contain: layout style;\n\n    transform:\n      perspective(var(--rot-perspective, 800px))\n      rotateX(var(--rot-x, 0deg))\n      rotateY(var(--rot-y, 0deg))\n      scale(var(--card-scale, 1));\n    transform-style: preserve-3d;\n    will-change: transform;\n\n    border: 1.5px solid rgba(255, 255, 255, 0.12);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n\n    transition:\n      border-color 0.25s ease,\n      box-shadow 0.25s ease,\n      opacity 0.3s ease;\n\n    /* Dimmed by default (not selected) */\n    opacity: 0.55;\n  }\n\n  :host(:hover),\n  :host(:focus-visible) {\n    opacity: 0.85;\n  }\n\n  :host([selected]) {\n    opacity: 1;\n    border-color: var(--card-accent, #818cf8);\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.3),\n      0 0 0 2px color-mix(in srgb, var(--card-accent, #818cf8) 30%, transparent),\n      0 4px 20px color-mix(in srgb, var(--card-accent, #818cf8) 25%, transparent);\n  }\n\n  :host(:focus-visible) {\n    outline: 2px solid var(--card-accent, #818cf8);\n    outline-offset: 3px;\n  }\n\n  :host(:active) {\n    transition-duration: 0.1s;\n  }\n\n  :host([disabled]) {\n    opacity: 0.3;\n    pointer-events: none;\n    cursor: default;\n  }\n\n  /* \u2500\u2500 Gradient fill \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  .card-fill {\n    position: absolute;\n    inset: 0;\n    background: var(--card-gradient);\n    z-index: 0;\n  }\n\n  /* \u2500\u2500 Cursor glow layer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  .glow-layer {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    pointer-events: none;\n    opacity: var(--glow-opacity, 0);\n    background: radial-gradient(\n      circle var(--glow-size, 120px) at var(--glow-x, 50%) var(--glow-y, 50%),\n      rgba(255, 255, 255, 0.25) 0%,\n      transparent 100%\n    );\n    transition: opacity 0.3s ease;\n  }\n\n  /* \u2500\u2500 Icon area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  .card-icon {\n    position: absolute;\n    top: 12px;\n    left: 12px;\n    z-index: 2;\n    font-size: 1.25rem;\n    color: white;\n    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);\n    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));\n    transform: translate(\n      calc(var(--tilt-x, 0) * 3px),\n      calc(var(--tilt-y, 0) * 3px)\n    );\n    pointer-events: none;\n    line-height: 1;\n  }\n\n  /* Fallback SVG icon sizing */\n  .fallback-icon svg {\n    width: 1.25em;\n    height: 1.25em;\n    display: block;\n  }\n\n  /* Slotted light DOM icon inherits consumer styles */\n  ::slotted(*) {\n    font-size: inherit;\n    color: inherit;\n    line-height: inherit;\n  }\n\n  /* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  .card-label {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 2;\n    padding: 8px 12px;\n    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));\n    pointer-events: none;\n    transform: translate(\n      calc(var(--tilt-x, 0) * -2px),\n      calc(var(--tilt-y, 0) * -2px)\n    );\n  }\n\n  .card-name {\n    font-size: 0.8125rem;\n    font-weight: 600;\n    line-height: 1.3;\n    color: white;\n    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);\n  }\n\n  /* \u2500\u2500 Selection ring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  .selection-ring {\n    position: absolute;\n    inset: -1px;\n    z-index: 3;\n    border-radius: inherit;\n    border: 2px solid var(--card-accent, #818cf8);\n    pointer-events: none;\n    animation: ring-pulse 2s ease-in-out infinite;\n    display: none;\n  }\n\n  :host([selected]) .selection-ring {\n    display: block;\n  }\n\n  @keyframes ring-pulse {\n    0%, 100% {\n      box-shadow: 0 0 6px color-mix(in srgb, var(--card-accent, #818cf8) 40%, transparent);\n    }\n    50% {\n      box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent, #818cf8) 60%, transparent);\n    }\n  }\n\n  /* \u2500\u2500 Accessibility: reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  @media (prefers-reduced-motion: reduce) {\n    :host {\n      transform: none;\n      transition:\n        opacity 0.15s ease,\n        border-color 0.15s ease;\n    }\n\n    .card-icon,\n    .card-label {\n      transform: none;\n    }\n\n    .selection-ring {\n      animation: none;\n      box-shadow: 0 0 8px color-mix(in srgb, var(--card-accent, #818cf8) 50%, transparent);\n    }\n\n    .glow-layer {\n      display: none;\n    }\n  }\n\n  /* \u2500\u2500 Accessibility: high contrast \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  @media (prefers-contrast: high) {\n    :host {\n      border: 2px solid rgba(255, 255, 255, 0.4);\n    }\n\n    :host([selected]) {\n      border: 3px solid var(--card-accent, #818cf8);\n    }\n  }\n\n  @media (prefers-contrast: high) and (prefers-color-scheme: light) {\n    :host {\n      border: 2px solid rgba(0, 0, 0, 0.4);\n    }\n  }\n";
//# sourceMappingURL=background-card-styles.d.ts.map