/* The fridge door. One explicit theme (the soup's), no dark mode switch. */
main.kitchen { max-width: 640px; grid-template-columns: minmax(0, 1fr); }
.fridge { position: relative; width: 100%; max-width: 600px; justify-self: center; display: grid; gap: 3px; perspective: 1400px; }
.freezer, .body { position: relative; width: 100%; border: 0; border-radius: 18px 18px 6px 6px; padding: 0;
  background: linear-gradient(90deg, #ece4d2 0%, #faf5ea 30%, #f1eadb 70%, #ddd3bf 100%);
  box-shadow: inset 0 -3px 0 #0001, 0 2px 0 #0004; }
.freezer { height: 170px; }
.grip { position: absolute; left: 22px; bottom: 12px; width: 120px; height: 10px; border: 0; padding: 0; border-radius: 5px; background: #b9ae98; box-shadow: inset 0 2px 0 #0002; cursor: pointer; z-index: 3; }
.grip:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
/* 2026-10-27, her ask: the page must still scroll under a thumb between the magnets; only a magnet itself refuses to scroll */
.mags { position: absolute; left: 0; right: 0; top: 0; bottom: 10px; pointer-events: none; z-index: 2; overflow: hidden; touch-action: pan-y; }
.mags .mag { pointer-events: auto; }
.body { border-radius: 6px 6px 14px 14px; min-height: 560px; overflow: hidden; touch-action: pan-y; }
.handle { position: absolute; left: 14px; top: 26px; width: 10px; height: 150px; border: 0; padding: 0; border-radius: 5px; background: #b9ae98; box-shadow: inset 2px 0 0 #0002; cursor: pointer; z-index: 3; }
.handle:focus-visible, .freezer:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.feet { display: flex; justify-content: space-between; padding: 0 24px; }
.feet i { width: 34px; height: 8px; background: #0c070e; border-radius: 0 0 4px 4px; }

.mag { position: absolute; touch-action: none; padding: 1px 6px 2px; background: #fffdf7; color: #1d1a16; font-family: 'Crimson Pro', Georgia, serif;
  font-size: 14px; line-height: 1.2; white-space: nowrap; box-shadow: 1px 2px 2px #2a1e1447; cursor: grab; user-select: none;
  transition: top .5s cubic-bezier(.3, 1.3, .5, 1), left .5s cubic-bezier(.3, 1.3, .5, 1); }
.mag.ending { padding: 1px 2px 2px; }
.mag.held { cursor: grabbing; box-shadow: 3px 7px 9px #2a1e1455; transition: none; }
.mag.falling { transition: top .6s ease-in, opacity .6s ease-in; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mag { transition: none !important; } }
@media (max-width: 480px) { .mag { font-size: 13px; padding: 1px 5px 2px; } }

/* inside: the light comes on, a few dishes on glass shelves */
.inside { position: absolute; left: 0; right: 0; top: 0; z-index: 5; box-sizing: border-box; overflow: hidden; border-radius: 16px 16px 12px 12px; padding: 34px 18px 18px;
  background: radial-gradient(ellipse at 50% 0%, #fffbe9 0%, #f3ead2 55%, #ddd0b0 100%); box-shadow: inset 0 0 0 10px #e6dcc6, inset 0 0 30px #b9ae9866;
  display: grid; align-content: start; animation: lightOn .35s ease-out; padding-right: 74px; }   /* the open door stands at the right */
.inside[hidden] { display: none; }
.inside.cold { background: radial-gradient(ellipse at 50% 0%, #f4fbff 0%, #dbe9ee 55%, #b6cbd2 100%); box-shadow: inset 0 0 0 10px #d3e2e7, inset 0 0 30px #8fb0bb66; }
.shelves { display: grid; gap: 0; }
.shelf { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 12px 16px; min-height: 120px; padding: 10px 6px 8px;
  border-bottom: 5px solid #ffffff99; box-shadow: 0 3px 0 #00000014; }
.dish { font: inherit; font-size: 15px; color: #1d1a16; border: 0; cursor: pointer; padding: 10px 14px; max-width: 170px; line-height: 1.15;
  border-radius: 10px 10px 16px 16px; box-shadow: 0 3px 0 #0002, inset 0 -6px 0 #0001; transition: transform .15s; }
.dish:hover, .dish:focus-visible { transform: translateY(-5px) rotate(-2deg); outline: none; box-shadow: 0 8px 10px #0003; }
.dish.jar { border-radius: 8px 8px 12px 12px; padding-top: 16px; }
.dish.plate { border-radius: 40px; padding: 8px 20px; }
.dish.foil { border-radius: 4px 14px 6px 12px; }
.shut { position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; background: #b9ae98; }
.shut::before { content: ""; position: absolute; left: 7px; top: 12px; width: 12px; height: 2px; background: #fffdf7; }
/* the doors hinge on the right, away from their handles, and swing out toward you; the open door is drawn over the inside */
.body, .freezer { transform-origin: right center; }
.body.swing, .freezer.swing { transform: rotateY(76deg); transition: transform .4s ease-in; z-index: 6;
  background: linear-gradient(90deg, #cfc5b0, #e9e1cf 60%, #f6f1e4); box-shadow: -6px 0 14px #0005; }
.swing .handle, .swing .ice, .swing .grip { visibility: hidden; }
.body, .freezer { transition: transform .35s ease-out; }
@keyframes lightOn { from { filter: brightness(.6); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) { .inside { animation: none; } .body, .freezer { transition: none; } }

/* the ice dispenser: press the lever and a line comes out */
.ice { position: absolute; left: calc(50% - 31px); top: 40px; width: 62px; height: 74px; border: 0; padding: 0; cursor: pointer; z-index: 3;
  border-radius: 10px; background: linear-gradient(180deg, #4a4148, #2c252b); box-shadow: inset 0 3px 6px #000a, 0 1px 0 #fff8; }
.ice .lever { position: absolute; left: 22px; top: 14px; width: 18px; height: 36px; border-radius: 4px 4px 8px 8px; background: #b9ae98;
  transition: transform .12s; transform-origin: top center; }
.ice::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 6px; border-radius: 3px; background: #6d6168; }
.ice:active .lever, .ice.pour .lever { transform: rotateX(35deg) translateY(4px); }
.ice:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* the freezer is short: one shelf, small dishes, room for the round button */
.inside.cold { padding: 12px 74px 12px 46px; align-content: center; }
.inside.cold .shelf { min-height: 0; padding: 6px 4px; gap: 8px 10px; border-bottom-width: 4px; }
.inside.cold .dish { font-size: 14px; padding: 7px 10px; max-width: 130px; }

/* the slam: the whole fridge jolts when a door is shut, which is what knocks the magnets off */
.fridge.slam { animation: slam .38s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes slam { 0% { transform: none; } 18% { transform: translate(-5px, 2px) rotate(-.6deg); } 40% { transform: translate(4px, -1px) rotate(.4deg); } 65% { transform: translate(-2px, 0); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fridge.slam { animation: none; } }