@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap");

:root { --ink: #181719; --paper: #fffdf7; --red: #e94c4c; --page-bg: radial-gradient(circle at 18% 16%, rgba(255,183,194,.58), transparent 25%), radial-gradient(circle at 84% 78%, rgba(129,184,210,.42), transparent 29%), linear-gradient(rgba(72,92,107,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(72,92,107,.07) 1px, transparent 1px), #fffaf0; font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 0; min-height: 100%; margin: 0; }
html { overflow: hidden; background: var(--page-bg); background-size: auto, auto, 28px 28px, 28px 28px, auto; }
body { overflow: clip; background: transparent; touch-action: pan-x pan-y pinch-zoom; }
button { font: inherit; }
button:focus-visible { outline: 4px solid #f7db55; outline-offset: 5px; }

.stage { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: auto; height: auto; padding: clamp(10px, 2.4vw, 28px); overflow: clip; perspective: 1800px; touch-action: pinch-zoom; }
.fridge { width: min(100%, calc((100svh - 56px) * 2 / 3), 680px); height: auto; max-height: 1020px; aspect-ratio: 2 / 3; min-width: 0; overflow: clip; contain: layout paint; perspective: 1900px; }
.fridge-cabinet { position: relative; width: 100%; height: 100%; overflow: visible; border: clamp(7px, 1vw, 13px) solid #d2d4d1; border-radius: 12px; background: #eef2f1; box-shadow: 0 32px 70px rgba(74,54,46,.28), 0 0 0 1px rgba(72,64,56,.13), inset 0 0 0 2px rgba(255,255,255,.75); transform-style: preserve-3d; }
.fridge-interior { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.fridge-door { position: absolute; z-index: 10; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: hidden; border: 0; border-radius: 5px; background: #a8adad; box-shadow: 0 10px 30px rgba(77,61,52,.22); transform-origin: right center; transform-style: preserve-3d; backface-visibility: hidden; transition: transform 1.05s cubic-bezier(.18,.78,.18,1), box-shadow .7s ease; }
.fridge-door__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fridge[data-state="open"] .fridge-door { pointer-events: none; transform: rotateY(-104deg); box-shadow: -24px 18px 34px rgba(0,0,0,.38); }
.door-open-hit { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.door-items { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.door-item { position: absolute; display: block; padding: 0; border: 0; background: transparent; pointer-events: none; transform: rotate(var(--tilt, 0deg)); filter: drop-shadow(0 3px 6px rgba(35,30,27,.24)); }
.door-item img { display: block; width: 100%; height: auto; pointer-events: none; }

.rule-spots { position: absolute; z-index: 4; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s .63s ease; }
.fridge[data-state="open"] .rule-spots { opacity: 1; pointer-events: auto; }
.rule-spot { position: absolute; left: var(--x); top: var(--shelf-y); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: var(--w); height: var(--h); padding: 0; border: 0; background: transparent; cursor: pointer; transform: translate(-50%, -100%) rotate(var(--tilt, 0deg)); transform-origin: 50% 100%; transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .2s ease; }
.rule-spot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 8px 6px rgba(25, 25, 25, .26)); pointer-events: none; transition: filter .2s ease; }
.rule-spot:hover, .rule-spot:focus-visible { z-index: 8; transform: translate(-50%, -104%) rotate(0deg) scale(1.06); }
.rule-spot:hover img, .rule-spot:focus-visible img { filter: drop-shadow(0 14px 12px rgba(20, 20, 20, .36)); }

.rule-sticky { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(var(--sticky-tilt, 0deg)); display: inline-flex; align-items: center; justify-content: center; padding: 2.5px 6.5px 3.5px; border-radius: 1px 1px 3px 1px; background: #fff899; box-shadow: 0 3px 8px rgba(35, 25, 15, 0.26), 0 1px 2px rgba(0, 0, 0, 0.12); color: #241c19; font-family: "DM Sans", system-ui, sans-serif; font-size: clamp(0.48rem, 1.35vw, 0.64rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; white-space: nowrap; line-height: 1.15; pointer-events: none; z-index: 5; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.rule-sticky::before { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(-1deg); width: 22px; height: 7px; background: rgba(255, 238, 185, 0.82); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); border-left: 1px dashed rgba(175, 145, 95, 0.45); border-right: 1px dashed rgba(175, 145, 95, 0.45); }
.rule-spot:hover .rule-sticky, .rule-spot:focus-visible .rule-sticky { transform: translateX(-50%) rotate(0deg) scale(1.05); box-shadow: 0 6px 14px rgba(35, 25, 15, 0.35), 0 2px 4px rgba(0, 0, 0, 0.18); }

.close-fridge { position: absolute; z-index: 8; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; color: white; background: rgba(14,14,14,.7); backdrop-filter: blur(8px); font-size: 1.5rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s .65s ease; }
.fridge[data-state="open"] .close-fridge { opacity: 1; pointer-events: auto; }

.rule-modal { position: fixed; inset: 0; width: calc(100dvw - 32px); max-width: 640px; min-width: 0; max-height: calc(100dvh - 32px); margin: auto; padding: clamp(28px, 6vw, 52px); overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 3px; color: var(--ink); background: linear-gradient(rgba(62,91,135,.07) 1px, transparent 1px), var(--paper); background-size: 100% 28px; box-shadow: 12px 14px 0 #e94c4c, 0 30px 80px rgba(0,0,0,.5); overflow-wrap: anywhere; overscroll-behavior: contain; }
.rule-modal::backdrop { background: rgba(9,9,9,.72); backdrop-filter: blur(7px); }
.rule-modal[open] { animation: modal-in .28s ease both; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; aspect-ratio: 1; border: 1px solid rgba(24,23,25,.22); border-radius: 50%; background: transparent; font-size: 1.45rem; cursor: pointer; }
.modal-index { display: inline-block; padding: 6px 9px; color: white; background: #315a9e; font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transform: rotate(-2deg); }
.modal-food { display: block; width: min(180px, 45%); height: 145px; margin: 15px 0 8px; object-fit: contain; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .17)); }
.modal-kicker { margin: 0 0 8px; color: #c83c3c; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.rule-modal h1 { max-width: 12ch; margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.2rem, 7vw, 3.5rem); line-height: .98; letter-spacing: -.045em; }
.modal-body { margin: 24px 0 0; font-size: 1rem; line-height: 1.72; }
.modal-body section + section { margin-top: 30px; padding-top: 22px; border-top: 1px dashed rgba(24,23,25,.2); }
.modal-body h2 { margin: 0 0 10px; color: #315a9e; font-family: "DM Sans", system-ui, sans-serif; font-size: 1rem; line-height: 1.35; letter-spacing: .035em; text-transform: uppercase; }
.modal-body h3 { margin: 18px 0 7px; font-size: .94rem; line-height: 1.4; }
.modal-body p { margin: 8px 0; }
.modal-body ul { margin: 8px 0; padding-left: 1.35rem; }
.modal-body li + li { margin-top: 7px; }
.modal-body blockquote { margin: 10px 0; padding: 10px 13px; border-left: 3px solid #315a9e; background: rgba(49,90,158,.08); font-family: "Playfair Display", Georgia, serif; font-style: italic; line-height: 1.5; }
.modal-body .format-example { padding: 11px 13px; border: 1px solid rgba(200,60,60,.28); background: rgba(233,76,76,.08); }
.modal-body a { color: #315a9e; font-weight: 700; text-underline-offset: 3px; }
.modal-guide { display: block; width: 100%; height: auto; margin: 0 0 26px; border: 1px solid rgba(24,23,25,.14); background: #fff; }
.modal-note { margin: 24px 0 0; padding: 13px 15px; border-left: 4px solid var(--red); background: #ffe8b7; font-family: "Playfair Display", Georgia, serif; font-style: italic; line-height: 1.45; }

@keyframes modal-in { from { opacity: 0; transform: translateY(18px) rotate(1deg) scale(.97); } }
@keyframes fridge-wiggle { 0%,100% { transform: scale(1); } 30% { transform: scale(1.15) rotate(4deg); } 60% { transform: scale(1.08) rotate(-4deg); } }
@media (max-width: 700px) {
  .stage { padding: 8px; }
  .fridge { width: min(100%, calc((100svh - 16px) * 2 / 3)); max-height: calc(100svh - 16px); }
  .rule-sticky { bottom: -6px; padding: 2px 5px 3px; font-size: clamp(0.42rem, 1.8vw, 0.58rem); letter-spacing: 0.03em; }
  .rule-sticky::before { top: -5px; width: 18px; height: 6px; }
  .modal-close { top: 12px; right: 12px; width: 38px; }
  .modal-index { margin-right: 44px; }
  .modal-food { width: min(140px, 45%); height: 115px; margin: 10px 0 8px; }
  .rule-modal h1 { max-width: 100%; font-size: clamp(2rem, 10vw, 2.8rem); line-height: 1.04; }
  .modal-body { margin-top: 18px; font-size: .95rem; line-height: 1.6; }
  .modal-note { margin-top: 18px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }