/* ==========================================================================
   My Matcha Fridge — retro pink fridge with shelves of iced matcha
   ========================================================================== */
#fridge-open { position: absolute; top: 20px; left: 152px; z-index: 30; padding: 9px 14px; font-size: 14px; }
#fridge-open .ic { color: #6F8C5A; }
.fridge-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
    background: #BDD373; color: #3E2727; font-size: 11.5px; line-height: 20px; text-align: center;
}
.fridge-badge[hidden] { display: none; }
#fridge-open.bump { animation: fridge-bump .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fridge-bump { 0% { transform: scale(1); } 35% { transform: scale(1.12) rotate(-3deg); } 100% { transform: scale(1); } }

#fridge-overlay {
    position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; padding: 20px;
    background: rgba(62, 39, 39, .3); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body.fridge-open #fridge-overlay { opacity: 1; pointer-events: auto; }

.fridge {
    position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 22px 22px 18px; border-radius: 40px 40px 32px 32px;
    background: linear-gradient(180deg, #FFC9D1 0%, #FFBCC5 55%, #F6AEB9 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -6px 0 rgba(180, 90, 110, .18), 0 30px 70px rgba(62, 39, 39, .3);
    color: #3E2727; text-align: left;
    transform: translateY(12px) scale(.98); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    scrollbar-width: thin;
}
body.fridge-open .fridge { transform: none; }
.fridge-close {
    position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
    border: none; background: rgba(255, 255, 255, .6); color: #3E2727; display: grid; place-items: center; cursor: pointer;
}
.fridge-close:hover { background: #fff; }

.fridge-top { padding: 4px 6px 14px; }
.fridge-title { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fridge-title .script { font-family: 'Great Vibes', cursive; font-size: 46px; line-height: 1; color: #4F6B3B; text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }
.fridge-title .sub { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 13px; color: #7A2E45; margin-top: 2px; }
.fridge-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.fridge-stats div {
    display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 16px;
    background: rgba(255, 251, 241, .75); border: 1.5px dashed rgba(122, 46, 69, .25);
}
.fridge-stats b { font-family: 'Fraunces', Georgia, serif; font-size: 24px; line-height: 1.1; }
.fridge-stats span { font-size: 11px; font-weight: 600; color: #7A5A55; }

.fridge-body { position: relative; padding: 10px; border-radius: 26px; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.fridge-handle {
    position: absolute; right: -10px; top: 28%; width: 8px; height: 90px; border-radius: 6px;
    background: linear-gradient(90deg, #F3F3F3, #C9C9C9 60%, #EDEDED); box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.fridge-inside {
    border-radius: 20px; padding: 6px 14px 4px;
    background: linear-gradient(180deg, #FFFDF7, #F4F8EE);
    box-shadow: inset 0 6px 14px rgba(62, 39, 39, .08), inset 0 0 0 1.5px rgba(62, 39, 39, .12);
}
.shelf { position: relative; padding-top: 10px; }
.shelf-label { display: flex; align-items: baseline; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: #8F7F78; letter-spacing: .02em; }
.shelf-label b { font-family: 'Fraunces', Georgia, serif; font-size: 13px; color: #6F8C5A; }
.shelf.today .shelf-label span { color: #9A3D57; }
.shelf-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px; min-height: 52px; padding: 4px 2px 0; }
.shelf-board {
    height: 7px; margin: 0 -8px; border-radius: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(214, 226, 205, .9));
    box-shadow: 0 3px 4px rgba(62, 39, 39, .12), inset 0 -1px 0 rgba(62, 39, 39, .12);
}
.shelf-empty { align-self: center; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 12.5px; color: #A3938C; padding-bottom: 8px; }
.shelf-more { align-self: center; font-weight: 800; font-size: 13px; color: #6F8C5A; padding: 0 4px 10px; }

.fg { display: inline-block; width: 32px; height: 43px; transform: rotate(var(--tilt)); transform-origin: bottom center; transition: transform .2s ease; }
.fg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fg:hover { transform: translateY(-4px) rotate(0); }
.fg.new { animation: fg-in .9s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d); }
@keyframes fg-in { 0% { transform: translateY(-60px) rotate(-20deg); opacity: 0; } 60% { transform: translateY(4px) rotate(var(--tilt)); opacity: 1; } 100% { transform: translateY(0) rotate(var(--tilt)); } }

.fridge-drawer {
    margin-top: 12px; padding: 12px 16px; border-radius: 20px;
    background: rgba(255, 251, 241, .85); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 2px 0 rgba(122, 46, 69, .15);
}
.fridge-drawer .row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.fridge-drawer .row b { font-family: 'Fraunces', Georgia, serif; }
.fridge-drawer .bar { height: 8px; margin: 8px 0 4px; border-radius: 99px; background: #EFE5D3; overflow: hidden; }
.fridge-drawer .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #A9C86E, #86A136); }
.fridge-drawer .hint { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 12px; color: #6F8C5A; }
.fridge-drawer .legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 11.5px; color: #7A5A55; }
.fridge-drawer .legend span { display: inline-flex; align-items: center; gap: 5px; }
.fridge-drawer .legend i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(62, 39, 39, .2); }

@media (prefers-reduced-motion: reduce) { .fg.new, #fridge-open.bump { animation: none; } }
@media (max-width: 600px) {
    #fridge-open { top: 14px; left: 128px; padding: 8px 10px; font-size: 13px; }
    #fridge-open span { display: none; }
    .fridge-stats b { font-size: 20px; }
    .fridge-title .script { font-size: 38px; }
}