/* Domain Card - Responsive with Fixed Proportions */

/* Card Container - Invisible structural device */
.domain-card {
    position: relative;
    width: min(90vw, 90vh * 0.645);  /* Fit in viewport with aspect ratio */
    max-width: 400px;  /* Maximum size */
    aspect-ratio: 400 / 620;  /* Fixed proportion (golden-ish ratio) */
    background: transparent;  /* Invisible container */
    border: none;  /* No visible border */
    border-radius: 0;  /* No border radius needed */
    overflow: visible;  /* Allow elements to extend beyond if needed */
    contain: layout style;
    margin: 40px auto;  /* Center with margin */
}

/* Remove mobile override - card always fills parent container */

/* Domain Circle - Central Hub (enhanced styling) */
.domain-circle-top {
    position: absolute;
    top: 50%;  /* Center vertically */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32%;  /* Slightly bigger central hub */
    aspect-ratio: 1;  /* Keep it circular */
    border-radius: 50%;
    border: 3px solid var(--domain-color, #fbbf24);
    background: radial-gradient(
        circle at 30% 30%,
        color-mix(in srgb, var(--domain-color, #fbbf24) 20%, transparent),
        color-mix(in srgb, var(--domain-color, #fbbf24) 8%, transparent),
        color-mix(in srgb, var(--domain-color, #fbbf24) 3%, transparent)
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 
        0 0 30px color-mix(in srgb, var(--domain-color, #fbbf24) 25%, transparent),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.domain-letter {
    font-size: calc(36px * var(--scale, 1));  /* Scale with card */
    font-weight: 600;
    color: var(--domain-color, #fbbf24);
    line-height: 1;
}

/* Domain Name - Even higher up */
.domain-name {
    position: absolute;
    top: 5%;  /* Another 20px equivalent higher */
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(24px * var(--scale, 1));  /* Scale with card */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

/* Focus Items - Bigger and positioned around central hub */
.focus-item {
    position: absolute;
    width: 25%;  /* 25% bigger as requested */
    aspect-ratio: 1;
}

/* Perfect equilateral triangle - scale-aware positioning */
.focus-item-1 {
    /* TOP focus - 150px radius straight up */
    top: calc(50% - (150px * var(--scale, 1)));
    left: 50%;
    transform: translate(-50%, -50%);
}

.focus-item-2 {
    /* BOTTOM-LEFT focus - 150px radius at 120° */
    top: calc(50% + (75px * var(--scale, 1)));   /* 150px × sin(30°) = 75px */
    left: calc(50% - (130px * var(--scale, 1)));  /* 150px × cos(30°) = 130px */
    transform: translate(-50%, -50%);
}

.focus-item-3 {
    /* BOTTOM-RIGHT focus - 150px radius at 240° */
    top: calc(50% + (75px * var(--scale, 1)));   /* 150px × sin(30°) = 75px */
    left: calc(50% + (130px * var(--scale, 1)));  /* 150px × cos(30°) = 130px */
    transform: translate(-50%, -50%);
}

/* Focus Circle - enhanced styling to match central hub */
.focus-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--domain-color, #fff) 50%, transparent);
    background: radial-gradient(
        circle at 30% 30%,
        color-mix(in srgb, var(--domain-color, #fff) 15%, transparent),
        color-mix(in srgb, var(--domain-color, #fff) 6%, transparent),
        color-mix(in srgb, var(--domain-color, #fff) 2%, transparent)
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 20px color-mix(in srgb, var(--domain-color, #fff) 15%, transparent),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.focus-circle:hover {
    border-color: color-mix(in srgb, var(--domain-color, #fff) 70%, transparent);
    background: radial-gradient(
        circle at 30% 30%,
        color-mix(in srgb, var(--domain-color, #fff) 25%, transparent),
        color-mix(in srgb, var(--domain-color, #fff) 12%, transparent),
        color-mix(in srgb, var(--domain-color, #fff) 5%, transparent)
    );
    transform: scale(1.08);
    box-shadow: 
        0 6px 25px color-mix(in srgb, var(--domain-color, #fff) 25%, transparent),
        inset 0 1px 2px rgba(255, 255, 255, 0.12);
}

/* Focus Number - Smaller and subtle */
.focus-number {
    font-size: calc(10px * var(--scale, 1));  /* Tiny week indicator */
    font-weight: 400;
    color: color-mix(in srgb, var(--domain-color, #fff) 40%, transparent);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Focus Main Text - Primary element inside circle */
.focus-main {
    font-size: calc(16px * var(--scale, 1));  /* Main focus text */
    font-weight: 600;
    color: var(--domain-color);
    text-align: center;
    line-height: 1.2;
}

/* Orbital circle that focus points sit on */
.orbital-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(300px * var(--scale, 1));  /* 150px radius × 2 */
    height: calc(300px * var(--scale, 1)); /* Perfect circle */
    border: 1px dashed color-mix(in srgb, var(--domain-color, #fbbf24) 35%, transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

/* Subtle arrows showing flow from focuses to domain */
.focus-arrow {
    position: absolute;
    width: 30px;
    height: 30px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 2;
}

.focus-arrow::before {
    content: '→';
    color: var(--domain-color, #fbbf24);
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.focus-arrow-1 {
    top: 35%;
    left: 50%;
    transform: rotate(180deg);  /* Point down toward center */
}

.focus-arrow-2 {
    top: 60%;
    left: 35%;
    transform: rotate(-60deg);  /* Point toward center */
}

.focus-arrow-3 {
    top: 60%;
    left: 65%;
    transform: rotate(60deg);  /* Point toward center */
}

/* Focus Label - Below circle (if still needed) */
.focus-label {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(18px * var(--scale, 1));  /* Prominent label */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
}

/* Remove global font scaling - will be handled per element */

/* Debug mode */
.domain-card--debug {
    border: 2px dashed red;
}

.domain-card--debug::before {
    content: 'Card Container';
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 10px;
    color: red;
    z-index: 1000;
}