/* ================================================================
   Cabinet Central — Kitchen Scene (Canvas 2D)
   ================================================================ */

.kitchen-scene {
    margin-top:      var(--header-height);
    min-height:      calc(100vh - var(--header-height));
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--cc-dark);
    position:        relative;
    overflow:        hidden;
}

/* ---- Canvas element ---- */
.kitchen-canvas {
    display:    block;
    width:      100%;
    /* Maintain a landscape aspect ratio — canvas JS handles pixel density */
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - var(--header-height));
    /* Canvas has its own cursor logic (pointer on hover) */
    cursor:     default;
    outline:    none;
}

/* Focus ring for keyboard nav */
.kitchen-canvas:focus-visible {
    outline:        3px solid var(--cc-accent);
    outline-offset: -3px;
}

/* ================================================================
   Mobile card grid fallback (shown below 540px, canvas hidden)
   ================================================================ */

.kitchen-cards {
    display: none;
}

.kitchen-card {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-xs);
    padding:        var(--space-md);
    background:     color-mix(in srgb, var(--zone-color, var(--cc-accent)) 10%, var(--cc-light));
    border:         2px solid color-mix(in srgb, var(--zone-color, var(--cc-accent)) 35%, transparent);
    border-radius:  var(--radius-md);
    cursor:         pointer;
    text-align:     left;
    transition:     transform var(--ease-fast), box-shadow var(--ease-fast);
}
.kitchen-card:hover        { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kitchen-card:focus-visible {
    outline:        3px solid var(--zone-color, var(--cc-accent));
    outline-offset: 2px;
}
.kitchen-card__label {
    font-weight: 700;
    font-size:   0.95rem;
    color:       var(--cc-dark);
}
.kitchen-card__desc {
    font-size:   0.8rem;
    color:       var(--cc-mid);
    line-height: 1.4;
}

/* ---- Hint text ---- */
.kitchen-hint {
    position:       absolute;
    bottom:         var(--space-lg);
    left:           50%;
    transform:      translateX(-50%);
    color:          rgba(255,255,255,.7);
    font-size:      0.8rem;
    letter-spacing: 0.04em;
    pointer-events: none;
    text-shadow:    0 1px 3px rgba(0,0,0,.5);
    animation:      hint-pulse 2.5s ease-in-out infinite;
    white-space:    nowrap;
}
@keyframes hint-pulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 768px) {
    .kitchen-canvas { aspect-ratio: 4 / 3; }
}

@media (max-width: 540px) {
    /* Hide canvas, show card grid */
    .kitchen-canvas  { display: none; }
    .kitchen-hint    { display: none; }
    .kitchen-scene   {
        background:  var(--cc-warm);
        min-height:  auto;
        padding:     var(--space-xl) var(--space-lg);
    }
    .kitchen-cards {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
        gap:                   var(--space-md);
        width:                 100%;
        max-width:             500px;
        margin:                0 auto;
    }
}

@media (max-width: 360px) {
    .kitchen-cards { grid-template-columns: 1fr; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .kitchen-hint { animation: none; opacity: 0.7; }
}