:root{
  --ink:#382b58;--muted:#72678a;--pink:#ff6ba8;--purple:#9069e9;
  --teal:#37bdb6;--paper:#fffdfd;--line:#e8d7f4;
  --shadow:0 12px 35px #65408a19;
}
*{box-sizing:border-box}
body{
  min-height:100vh;margin:0;color:var(--ink);
  font-family:ui-rounded,"Trebuchet MS","Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 4% 4%,#ffddec,transparent 30%),
    radial-gradient(circle at 99% 10%,#d4f8f3,transparent 32%),
    radial-gradient(circle at 50% 90%,#fff2ca,transparent 32%),#faf2ff;
}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid #149b94;outline-offset:4px}
.cupboard-header{padding:17px 24px}
.cupboard-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1170px;margin:auto}
.logo{color:var(--ink);font-weight:900;font-size:1.3rem;text-decoration:none;white-space:nowrap}
.logo span{color:var(--pink)}
.nav-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.nav-links a,.button-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;
  border:1px solid var(--line);border-radius:100px;background:#fffefa;
  box-shadow:var(--shadow);color:var(--ink);font-weight:800;text-decoration:none;
}
.nav-links a:hover,.button-link:hover{transform:translateY(-2px)}
.button-link[hidden],.cabinet[hidden],.clean-button[hidden]{display:none!important}
.cupboard-main{width:min(100% - 36px,1130px);margin:auto;padding:15px 0 45px}
.cupboard-intro{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:10px 0 18px}
.eyebrow{margin:0 0 9px;font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#855b96}
h1{margin:0;font-size:clamp(2.35rem,6vw,4.4rem);line-height:1.1;letter-spacing:-.055em}
.gradient{
  background:linear-gradient(100deg,#f363a7,#9369e5,#39bcb6);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.intro{max-width:600px;margin:11px 0 0;color:var(--muted);line-height:1.55}
.cupboard-tools{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px}
.clean-button{
  position:relative;overflow:hidden;min-height:48px;padding:12px 20px;border:0;
  border-radius:100px;background:linear-gradient(115deg,#ff6ba8,#9b77ed 68%,#6aaceb);
  box-shadow:0 8px 0 #bd72ae38,0 14px 25px #ae6de831;
  color:white;font:inherit;font-weight:900;cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.clean-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 11px 0 #bd72ae30,0 20px 28px #ae6de836}
.clean-button:disabled{opacity:.65;cursor:wait}
.notice{
  margin:12px 0 20px;padding:12px 16px;min-height:42px;border:1px solid #e6d7f4;
  border-radius:16px;background:#fffdfddd;color:#716186;font-weight:800;
}
.notice.error{background:#ffe6eb;border-color:#ffb6c8;color:#972c53}
/* A candy-coloured storybook cupboard, with rows of little arched alcoves. */
.cabinet{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(13px,2.4vw,28px);
  border:clamp(8px,1.1vw,13px) solid #b983b9;
  border-radius:35px 35px 25px 25px;
  background:
    radial-gradient(circle at 12% 10%,#ffffff7c 0 2px,transparent 3px) 0 0/50px 52px,
    repeating-linear-gradient(0deg,transparent 0 124px,#a877a21e 125px 128px),
    linear-gradient(116deg,#f4b8cf 0%,#f9d6c7 21%,#edb8d9 51%,#dfc7f6 80%,#c4e9e2);
  box-shadow:
    inset 0 0 0 5px #ffeaf0,inset 0 11px 12px #fff9,
    0 15px 0 #9873ab,0 25px 34px #7e5c9940;
}
.cabinet::before{
  content:"✿  ✦  ♡  ✦  ✿";
  position:absolute;top:4px;left:50%;transform:translateX(-50%);
  color:#fffefb;font-size:14px;letter-spacing:15px;white-space:nowrap;opacity:.85;
  pointer-events:none
}
.cabinet::after{
  content:"";
  position:absolute;bottom:0;left:0;right:0;height:11px;
  background:linear-gradient(90deg,#d18fb5,#ffe4d3,#d099ce);
  box-shadow:0 -2px 0 #fff8;pointer-events:none
}
.cubby-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(9px,1.4vw,16px);position:relative;z-index:1;
}
.cubby{
  --arch:#fff6ea;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;min-width:0;min-height:147px;padding:10px 7px 8px;
  border:4px solid #fff2f8;border-bottom:7px solid #f5bfc7;
  border-radius:45% 45% 12px 12px/23% 23% 12px 12px;
  background:
    radial-gradient(ellipse at 50% 78%,#e8c8ec5c,transparent 62%),
    linear-gradient(164deg,#fff8f6 0%,var(--arch) 62%,#f9e4e6 100%);
  box-shadow:inset 0 6px 15px #7152832b,inset 0 -9px 0 #dcbbce3d,
             0 5px 0 #bb8ca9,0 9px 12px #8a5c9340;
  transition:transform .2s,box-shadow .2s;
  text-align:center;
}
.cubby:nth-child(6n+2){--arch:#f1f2ff}
.cubby:nth-child(6n+3){--arch:#edfffa}
.cubby:nth-child(6n+4){--arch:#fff1d8}
.cubby:nth-child(6n+5){--arch:#ffeaf1}
.cubby:nth-child(6n){--arch:#eee7ff}
.cubby:hover,.cubby:focus-within{
  transform:translateY(-3px);box-shadow:inset 0 6px 15px #7152832b,
  inset 0 -9px 0 #dcbbce3d,0 8px 0 #bb8ca9,0 15px 20px #8a5c9340;
  z-index:2;
}
.cubby::before{
  position:absolute;content:"";pointer-events:none;
  left:13px;right:13px;bottom:28px;height:12px;
  border-radius:50%;background:#96749b24;filter:blur(4px)
}
.cubby-content{
  min-width:0;width:100%;display:flex;align-items:center;justify-content:center;
  flex:1;position:relative;z-index:1;
}
.treasure-emoji{
  font-size:clamp(2.8rem,4.3vw,4.3rem);line-height:1;
  filter:drop-shadow(0 8px 4px #72548b2f);
  animation:treasure-float 3.4s ease-in-out infinite;
}
.treasure-image{
  max-width:94%;width:110px;height:83px;object-fit:contain;
  border:4px solid #fff;border-radius:10px;background:white;
  box-shadow:0 5px 13px #654d7d30;
  transform:rotate(-3deg);transition:transform .22s;
}
.cubby:nth-child(even) .treasure-image{transform:rotate(3deg)}
.cubby:hover .treasure-image{transform:rotate(0deg) scale(1.05)}
.cubby-actions{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:5px;min-height:31px;position:relative;z-index:2;width:100%;
}
.cubby-action{
  padding:6px 8px;border:1px solid #e7d5fa;border-radius:11px;
  background:#f8ebff;color:#654391;cursor:pointer;font:inherit;
  font-size:.7rem;font-weight:900;line-height:1.1;
  box-shadow:0 2px 0 #d8bee8;
}
.cubby-action:hover:not(:disabled){background:#ead4ff;transform:translateY(-2px)}
.cubby-action:disabled{opacity:.55}
.cubby-empty{justify-content:center}
.cubby-empty::before{opacity:.35}
.empty-ornament{
  position:relative;z-index:1;user-select:none;
  color:#c3a3cc;font-size:clamp(2rem,3.3vw,3.25rem);line-height:1;
  opacity:.52;transform:rotate(-10deg);
  text-shadow:0 2px #fff;
}
.cubby-empty:nth-child(3n) .empty-ornament{color:#9acfc4;transform:rotate(13deg)}
.cubby-empty:nth-child(5n) .empty-ornament{color:#efa8c9;transform:rotate(7deg)}
.cubby-empty::after{
  position:absolute;right:5px;top:8px;content:"🕸";font-size:1.6rem;
  opacity:0;transform:scale(.55) rotate(-20deg);transform-origin:top right;
  transition:opacity .5s,transform .5s;pointer-events:none
}
.cubby-empty[data-dirt="1"]::after{opacity:.24;transform:scale(.65) rotate(-10deg)}
.cubby-empty[data-dirt="2"]::after{opacity:.55;transform:scale(.84) rotate(-5deg)}
.cubby-empty[data-dirt="3"]::after{opacity:.85;transform:scale(1)}
.cubby-empty[data-dirt="2"] .empty-ornament,.cubby-empty[data-dirt="3"] .empty-ornament{opacity:.24}
.sparkle-wash,.magic-stars{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.magic-star{
  position:absolute;left:var(--x);top:var(--y);opacity:0;
  color:#fffef6;text-shadow:0 0 6px #ff79bb,0 0 16px #fff9b3;
  font-size:clamp(19px,2.5vw,31px);
  transform:scale(var(--scale));animation:magic-pop .65s var(--delay) ease-out both;
}
.cabinet.is-cleaning .cubby{
  animation:cubby-shimmer .55s var(--shine-delay,0s) ease-in-out both;
}
.cabinet.is-cleaning .cubby-empty::after{
  opacity:0!important;transform:scale(0) rotate(60deg)!important;
  transition:opacity .55s var(--shine-delay,0s),transform .55s var(--shine-delay,0s);
}
.cabinet.is-cleaning .sparkle-wash{
  background:linear-gradient(105deg,transparent 0%,#ffffff0a 36%,#fff8c566 49%,#fff8 50%,#ffffff08 60%,transparent 70%);
  width:65%;transform:translateX(-120%);
  animation:magic-wave 1.85s ease-in-out forwards;
}
.cabinet.sparkling .sparkle-wash{
  background:radial-gradient(circle,#fff 0 2px,transparent 4px) 12% 34%/65px 66px,
             radial-gradient(circle,#fff6a7 0 2px,transparent 4px) 60% 52%/85px 70px;
  animation:finish-glow .8s ease-out forwards;
}
.cupboard-footnote{margin:25px auto 0;color:var(--muted);text-align:center;line-height:1.55;font-weight:700}
@keyframes treasure-float{0%,100%{transform:translateY(1px) rotate(-5deg)}50%{transform:translateY(-5px) rotate(4deg)}}
@keyframes cubby-shimmer{
  0%{filter:brightness(1);transform:scale(1)}
  45%{filter:brightness(1.23);transform:scale(1.035);box-shadow:0 0 24px #fff5b4}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes magic-pop{
  0%{opacity:0;transform:translateY(12px) scale(.1) rotate(-30deg)}
  35%{opacity:1}
  75%{opacity:1;transform:translateY(-14px) scale(var(--scale)) rotate(12deg)}
  100%{opacity:0;transform:translateY(-26px) scale(.15) rotate(42deg)}
}
@keyframes magic-wave{0%{transform:translateX(-120%)}100%{transform:translateX(235%)}}
@keyframes finish-glow{0%,100%{opacity:0}50%{opacity:1}}
@media(max-width:880px){
  .cupboard-intro{align-items:flex-start;flex-direction:column}
  .cupboard-tools{justify-content:flex-start}
  .cubby-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:580px){
  .cupboard-header{padding:15px}
  .cupboard-nav{flex-direction:column;align-items:flex-start}
  .nav-links{justify-content:flex-start;gap:7px}
  .nav-links a{padding:7px 11px;font-size:.84rem}
  .cupboard-main{width:min(100% - 20px,1130px);padding-top:8px}
  .cabinet{border-width:7px;border-radius:24px;padding:12px}
  .cubby-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cubby{min-height:119px;padding:8px 3px 5px;border-width:3px;border-bottom-width:5px}
  .treasure-emoji{font-size:2.6rem}
  .treasure-image{width:82px;height:62px;border-width:2px}
  .cubby-action{font-size:.61rem;padding:5px 4px}
  .cubby-actions{min-height:25px}
  .empty-ornament{font-size:2.2rem}
}
@media(max-width:355px){
  .cubby-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cubby{min-height:122px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}