/* ═══════════════════════════════════════════════════════════════════
   AlchemistCabinet v1.0 — cabinet.css
   Palette: #1a0f05 ebony | #2a1a08 dark wood | #5c3a1e mid wood
            #8B4513 saddle | #c8860a amber | #e8d5a0 parchment
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
    --ac-wood:        #2a1a08;
    --ac-wood-mid:    #5c3a1e;
    --ac-wood-light:  #8B4513;
    --ac-amber:       #c8860a;
    --ac-amber-light: #e8a020;
    --ac-parchment:   #e8d5a0;
    --ac-ebony:       #1a0f05;
    --ac-brass:       #b5813e;
    --ac-patina:      #2a4a1a;
    --ac-ambient:     0.65;
    --ac-glow-warm:   rgba(220,140,30,0.18);
}

/* ── Wrapper ── */
.ac-wrapper {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    background: var(--ac-wood, #2a1a08);
    border-radius: 6px 6px 3px 3px;
    box-shadow:
        0 0 0 3px #0d0802,
        0 0 0 6px var(--ac-brass, #b5813e),
        0 0 0 8px #0d0802,
        0 8px 40px rgba(0,0,0,0.85),
        0 2px 8px rgba(0,0,0,0.7);
    font-family: 'Georgia', 'Times New Roman', serif;
    overflow: visible;
    transform-style: preserve-3d;
    perspective: 1200px;
    user-select: none;
}

/* Wood grain overlay */
.ac-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        repeating-linear-gradient(
            178deg,
            transparent 0px, transparent 3px,
            rgba(255,200,80,0.025) 3px, rgba(255,200,80,0.025) 4px
        ),
        repeating-linear-gradient(
            92deg,
            transparent 0px, transparent 18px,
            rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 19px
        );
    pointer-events: none;
    z-index: 0;
}

/* Warm ambient candle light wash */
.ac-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at 50% 20%,
        rgba(220,140,30,0.22) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 1;
    animation: ac-ambient-pulse 4s ease-in-out infinite;
}
@keyframes ac-ambient-pulse {
    0%,100% { opacity: 0.8; }
    50%     { opacity: 1.0; }
}

/* ══════════════════════════════════════════════
   Top Vial Shelf
   ══════════════════════════════════════════════ */
.ac-vial-shelf {
    position: relative;
    z-index: 10;
    padding: 18px 60px 0;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(10,6,2,0.55) 0%, rgba(0,0,0,0) 100%);
}

.ac-shelf-board {
    height: 14px;
    background: linear-gradient(180deg, #6a3e14 0%, #4a2a0a 40%, #3a2008 100%);
    border-top: 2px solid var(--ac-brass, #b5813e);
    border-bottom: 2px solid #0d0802;
    box-shadow:
        inset 0 2px 4px rgba(255,200,80,0.12),
        0 4px 10px rgba(0,0,0,0.6);
    position: relative;
    z-index: 5;
}
.ac-shelf-board--top  { margin-bottom: 4px; }
.ac-shelf-board--bottom { margin-top: -2px; }

/* ── Vials row ── */
.ac-vials-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 4px;
    flex-wrap: wrap;
    z-index: 6;
    position: relative;
}

/* ── Individual Vial ── */
.ac-vial {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    transition: transform 0.2s ease;
}
.ac-vial:hover { transform: translateY(-5px) scale(1.05); }

.ac-vial-label {
    font-size: 9px;
    color: var(--ac-parchment, #e8d5a0);
    opacity: 0.7;
    margin-bottom: 4px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

/* Cork stopper */
.ac-vial-cork {
    width: 16px;
    height: 9px;
    background: linear-gradient(180deg, #c8a060 0%, #8a5c28 100%);
    border-radius: 3px 3px 1px 1px;
    border: 1px solid #6a4018;
    position: relative;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Glass body */
.ac-vial-glass {
    width: 34px;
    height: 80px;
    border-radius: 3px 3px 40% 40%;
    background: rgba(200,230,255,0.07);
    border: 1.5px solid rgba(200,220,240,0.28);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 2px 0 6px rgba(255,255,255,0.07),
        inset -2px 0 4px rgba(0,0,0,0.3),
        0 2px 8px rgba(0,0,0,0.5);
}

/* Glass highlight streak */
.ac-vial-glass::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 5px; height: 60%;
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%);
    border-radius: 3px;
    pointer-events: none;
    z-index: 4;
}

/* WebGL canvas sits inside the glass */
.ac-vial-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Vial wooden base */
.ac-vial-base {
    width: 40px;
    height: 7px;
    background: linear-gradient(180deg, #6a3e14 0%, #3a1e08 100%);
    border-radius: 2px;
    border-top: 1px solid rgba(180,120,40,0.4);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════
   Candles
   ══════════════════════════════════════════════ */
.ac-candle {
    position: absolute;
    top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
}
.ac-candle-l { left: 10px; }
.ac-candle-r { right: 10px; }

.ac-candle-holder {
    width: 18px; height: 8px;
    background: linear-gradient(180deg, #8a6030 0%, #4a3010 100%);
    border: 1px solid var(--ac-brass,#b5813e);
    border-radius: 2px;
    position: relative; z-index: 2;
}
.ac-candle-body {
    width: 12px; height: 52px;
    background: linear-gradient(180deg, #f0e8d0 0%, #d0c098 50%, #a89070 100%);
    border-radius: 1px 1px 0 0;
    position: relative; z-index: 2;
    box-shadow: inset -2px 0 5px rgba(0,0,0,0.2);
}
.ac-candle-body::after {
    content:'';
    position:absolute;
    top:5px; left:2px;
    width:2px; height:12px;
    background:rgba(255,255,255,0.3);
    border-radius:0 0 2px 2px;
}
.ac-candle-flame {
    position:absolute;
    top:-22px;
    width:14px; height:22px;
    display:flex; justify-content:center;
    z-index:3;
}
.ac-candle-flame::before {
    content:'';
    position:absolute;
    bottom:0;
    width:12px; height:22px;
    background:radial-gradient(ellipse at 50% 80%,
        #fff8e0 0%, #ffcc44 35%, #ff8800 65%, transparent 100%);
    border-radius:50% 50% 30% 30%;
    animation:ac-flame 0.11s ease-in-out infinite alternate;
    transform-origin:bottom center;
    filter:blur(0.5px);
}
.ac-flame-inner {
    position:absolute; bottom:2px;
    width:4px; height:8px;
    background:radial-gradient(ellipse, #c0e8ff 0%, #80c0ff 60%, transparent 100%);
    border-radius:50% 50% 30% 30%;
    animation:ac-flame-inner 0.09s ease-in-out infinite alternate;
    transform-origin:bottom center;
}
@keyframes ac-flame {
    0%   { transform:scaleX(1) rotate(-1deg); }
    50%  { transform:scaleX(0.88) scaleY(1.06) rotate(2deg); }
    100% { transform:scaleX(1.06) rotate(-2deg); }
}
@keyframes ac-flame-inner {
    0%   { transform:rotate(1deg); }
    100% { transform:scaleX(0.85) rotate(-2deg); }
}
.ac-candle-glow {
    position:absolute; top:-16px;
    width:100px; height:100px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,175,35,0.32) 0%, transparent 70%);
    animation:ac-glow-pulse 0.14s ease-in-out infinite alternate;
    pointer-events:none;
    mix-blend-mode:screen;
    z-index:1;
}
@keyframes ac-glow-pulse {
    0%   { transform:scale(1);    opacity:0.7; }
    100% { transform:scale(1.15); opacity:1;   }
}

/* ══════════════════════════════════════════════
   Horizontal Trim
   ══════════════════════════════════════════════ */
.ac-trim--h {
    height: 8px;
    background: linear-gradient(180deg, #0d0802 0%, #5c3a1e 30%, #3a2008 100%);
    border-top: 1px solid var(--ac-brass,#b5813e);
    border-bottom: 1px solid var(--ac-brass,#b5813e);
    box-shadow: inset 0 1px 3px rgba(255,200,80,0.15);
    position: relative; z-index: 5;
}

/* ══════════════════════════════════════════════
   Drawer Grid
   ══════════════════════════════════════════════ */
.ac-drawer-grid {
    display: grid;
    grid-template-columns: repeat(var(--ac-cols, 3), 1fr);
    gap: 6px;
    padding: 10px;
    position: relative;
    z-index: 6;
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 100%);
}

/* ── Single Drawer ── */
.ac-drawer {
    position: relative;
    border-radius: 3px;
    cursor: pointer;
    background: linear-gradient(180deg, #3a2408 0%, #2a1808 60%, #1e1206 100%);
    border: 1.5px solid #0d0802;
    box-shadow:
        inset 0 2px 4px rgba(255,200,80,0.06),
        inset 0 -2px 4px rgba(0,0,0,0.4),
        0 2px 6px rgba(0,0,0,0.5);
    overflow: visible;
    transition: box-shadow 0.2s ease;
}
.ac-drawer:focus-visible {
    outline: 2px solid var(--ac-amber,#c8860a);
    outline-offset: 2px;
}
.ac-drawer:hover {
    box-shadow:
        inset 0 2px 4px rgba(255,200,80,0.14),
        inset 0 -2px 4px rgba(0,0,0,0.4),
        0 2px 12px rgba(200,130,10,0.22);
}

/* Image container (revealed beneath open drawer face) */
.ac-drawer-image-wrap {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    overflow: hidden;
    z-index: 0;
    background: #0d0802;
}
.ac-drawer-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.85) sepia(0.25) saturate(0.85);
    transition: filter 0.45s ease;
}
.ac-drawer.ac-open .ac-drawer-image-wrap img {
    filter: brightness(1.0) sepia(0.1) saturate(0.95);
}

/* Drawer face — the panel that tips forward on hover */
.ac-drawer-face {
    width: 100%;
    padding-bottom: 80%;
    position: relative;
    background: linear-gradient(160deg, #4a2c10 0%, #321a08 50%, #281408 100%);
    border-radius: 2px;
    transform-origin: top center;
    transform: rotateX(0deg);
    transition: transform 0.5s cubic-bezier(0.34,1.15,0.64,1);
    transform-style: preserve-3d;
    will-change: transform;
    z-index: 2;
}

/* Grain lines on face */
.ac-drawer-face::before {
    content:'';
    position:absolute; inset:0;
    background:repeating-linear-gradient(
        174deg,
        transparent 0, transparent 5px,
        rgba(255,200,80,0.03) 5px, rgba(255,200,80,0.03) 6px
    );
    pointer-events:none;
}

/* Keyhole mark */
.ac-drawer-face::after {
    content:'';
    position:absolute;
    top:38%; left:50%; transform:translate(-50%,-50%);
    width:6px; height:8px;
    background:rgba(0,0,0,0.45);
    border-radius:50% 50% 3px 3px;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.4);
    pointer-events:none;
}

/* Hover / open: tip drawer face forward */
.ac-drawer:hover  .ac-drawer-face,
.ac-drawer.ac-open .ac-drawer-face {
    transform: rotateX(40deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

/* Metal handle bar */
.ac-drawer-handle {
    position: absolute;
    bottom: 14%; left: 50%;
    transform: translateX(-50%);
    width: 38%; height: 7px;
    border-radius: 3px;
    border: 1.5px solid rgba(0,0,0,0.4);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.6),
        inset 0 1px 2px rgba(255,255,255,0.25),
        0 0 8px rgba(200,160,40,0.22);
    z-index: 3;
    /* Background colour set from JS via inline style */
}

/* Handle ring ornament */
.ac-drawer-handle::before {
    content:'';
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:10px; height:10px;
    border-radius:50%;
    border:1.5px solid currentColor;
    opacity:0.45;
}

/* Text label */
.ac-drawer-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    text-align: center;
    font-size: 8.5px;
    font-style: italic;
    letter-spacing: 0.06em;
    color: var(--ac-parchment,#e8d5a0);
    opacity: 0.65;
    padding: 3px 4px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(180,120,40,0.2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 0 0 2px 2px;
    pointer-events: none;
    z-index: 4;
}

/* Lock icon override on keyhole */
.ac-drawer.ac-locked .ac-drawer-face::after {
    background: rgba(0,0,0,0.7);
    box-shadow: 0 3px 0 0 rgba(180,100,20,0.6), 0 0 8px rgba(180,100,20,0.25);
}
.ac-drawer.ac-locked { cursor: not-allowed; }

/* ══════════════════════════════════════════════
   Cabinet Feet
   ══════════════════════════════════════════════ */
.ac-feet {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}
.ac-foot {
    width: 28px; height: 22px;
    background: linear-gradient(180deg, #4a2a0a 0%, #1e0e04 100%);
    border-radius: 0 0 6px 6px;
    border-left: 2px solid var(--ac-brass,#b5813e);
    border-right: 2px solid var(--ac-brass,#b5813e);
    border-bottom: 2px solid var(--ac-brass,#b5813e);
    box-shadow: 0 4px 10px rgba(0,0,0,0.7);
}

/* ══════════════════════════════════════════════
   Dust Motes
   ══════════════════════════════════════════════ */
.ac-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    overflow: hidden;
    border-radius: inherit;
}
.ac-mote {
    position: absolute;
    border-radius: 50%;
    background: rgba(220,185,80,0.5);
    animation: ac-drift linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes ac-drift {
    0%   { transform:translateY(0)    translateX(0)   scale(1);   opacity:0; }
    8%   { opacity:1; }
    45%  { transform:translateY(-38%) translateX(7%)  scale(0.9); }
    90%  { opacity:0.45; }
    100% { transform:translateY(-80%) translateX(-5%) scale(0.7); opacity:0; }
}

/* ══════════════════════════════════════════════
   Lightbox
   ══════════════════════════════════════════════ */
.ac-lightbox {
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,6,2,0.94);
    opacity:0; pointer-events:none;
    transition:opacity 0.35s ease;
}
.ac-lightbox.ac-lb-open { opacity:1; pointer-events:all; }

.ac-lb-backdrop {
    position:absolute; inset:0;
    background:radial-gradient(ellipse at center, transparent 20%, rgba(20,10,2,0.85) 100%);
    pointer-events:none;
}

.ac-lb-close {
    position:absolute; top:20px; right:24px;
    background:transparent;
    border:1px solid rgba(180,120,40,0.5);
    color:var(--ac-amber,#c8860a);
    font-size:28px; width:44px; height:44px;
    border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s, color 0.2s; z-index:10;
}
.ac-lb-close:hover { background:rgba(180,120,40,0.2); color:#fff; }

.ac-lb-frame {
    position:relative;
    max-width:88vw; max-height:88vh;
    border:3px solid var(--ac-brass,#b5813e);
    box-shadow:
        0 0 0 1px #0d0802,
        0 0 40px rgba(200,130,10,0.3),
        0 0 80px rgba(200,130,10,0.12),
        inset 0 0 20px rgba(0,0,0,0.6);
    border-radius:4px;
    overflow:hidden;
    background:#0d0802;
}
.ac-lb-inner img {
    max-width:88vw; max-height:80vh;
    display:block; border-radius:2px;
    filter:sepia(0.1) saturate(0.95);
}
.ac-lb-caption {
    padding:10px 18px;
    font-family:'Georgia',serif;
    font-size:13px; font-style:italic;
    color:var(--ac-parchment,#e8d5a0);
    opacity:0.8; text-align:center;
    background:rgba(0,0,0,0.5);
    border-top:1px solid rgba(180,120,40,0.3);
    letter-spacing:0.04em;
}

/* ══════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════ */
@media (max-width:520px) {
    .ac-drawer-grid { --ac-cols:2 !important; gap:4px; padding:6px; }
    .ac-vial-shelf  { padding:14px 40px 0; min-height:100px; }
    .ac-candle      { display:none; }
}

@media (prefers-reduced-motion:reduce) {
    .ac-candle-flame::before,.ac-flame-inner,.ac-candle-glow,
    .ac-mote,.ac-wrapper::after { animation:none !important; }
    .ac-drawer-face { transition:none !important; }
}