/* style.css — Pantry Match */
:root{
  --bg:#1b130d;
  --bg2:#241a12;
  --panel:#2e2118;
  --panel-2:#3a2a1d;
  --ink:#f6ead8;
  --ink-dim:#c8b59c;
  --muted:#8a7864;
  --accent:#ffb347;
  --accent-2:#ff7e5f;
  --good:#7bd88f;
  --wood:#6b4423;
  --wood-2:#4f2f17;
  --wood-edge:#7a4f29;
  --tile:#fbf3e6;
  --tile-shadow:rgba(0,0,0,.35);
  --radius:16px;
  --slot:clamp(54px, 16vw, 86px);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f1e6d2;
    --bg2:#e7d9bf;
    --panel:#fbf3e2;
    --panel-2:#f0e3cb;
    --ink:#3a2715;
    --ink-dim:#6b5236;
    --muted:#9a8568;
    --accent:#e8870c;
    --accent-2:#d9534f;
    --wood:#b07a43;
    --wood-2:#8a5a2d;
    --wood-edge:#c08a52;
    --tile:#fffdf8;
    --tile-shadow:rgba(80,50,20,.25);
    color-scheme:light;
  }
}
html[data-theme="dark"]{
  --bg:#1b130d; --bg2:#241a12; --panel:#2e2118; --panel-2:#3a2a1d;
  --ink:#f6ead8; --ink-dim:#c8b59c; --muted:#8a7864; --accent:#ffb347;
  --accent-2:#ff7e5f; --wood:#6b4423; --wood-2:#4f2f17; --wood-edge:#7a4f29;
  --tile:#fbf3e6; --tile-shadow:rgba(0,0,0,.35); color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f1e6d2; --bg2:#e7d9bf; --panel:#fbf3e2; --panel-2:#f0e3cb;
  --ink:#3a2715; --ink-dim:#6b5236; --muted:#9a8568; --accent:#e8870c;
  --accent-2:#d9534f; --wood:#b07a43; --wood-2:#8a5a2d; --wood-edge:#c08a52;
  --tile:#fffdf8; --tile-shadow:rgba(80,50,20,.25); color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,179,71,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,126,95,.10), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--ink);
  overflow:hidden;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
  max-width:860px;
  margin:0 auto;
  padding:14px 16px 18px;
  gap:12px;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.logo{
  font-size:26px;
  width:44px;height:44px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  border-radius:12px;
  box-shadow:0 6px 18px rgba(255,126,95,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.brand-text h1{font-size:18px;margin:0;letter-spacing:.2px;font-weight:800;}
.brand-text p{margin:0;font-size:12px;color:var(--ink-dim);}

.stats{display:flex;gap:8px;margin-left:auto;}
.stat{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px;
  padding:6px 12px;
  text-align:center;
  min-width:60px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.stat .lbl{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.stat .val{display:block;font-size:18px;font-weight:800;color:var(--ink);}

.actions{display:flex;gap:8px;}
.btn,.iconbtn{
  font-family:inherit;font-weight:700;font-size:13px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--panel-2);
  color:var(--ink);
  padding:9px 14px;border-radius:11px;cursor:pointer;
  transition:transform .12s ease, background .2s, box-shadow .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.iconbtn{padding:9px 11px;font-size:16px;line-height:1;}
.btn:hover{background:var(--panel);transform:translateY(-1px);}
.btn:active,.iconbtn:active{transform:translateY(1px) scale(.98);}
.btn.primary{
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  color:#3a1c08;border-color:transparent;
  box-shadow:0 6px 16px rgba(255,126,95,.4);
}
.btn.primary:hover{filter:brightness(1.05);}

/* Queue preview */
.queue-wrap{
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.05));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px 12px;
}
.queue-label{
  display:flex;align-items:center;gap:8px;
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-dim);margin-bottom:8px;font-weight:700;
}
.queue-label .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--good);box-shadow:0 0 8px var(--good);
}
.qcount{color:var(--muted);text-transform:none;letter-spacing:0;margin-left:auto;font-weight:600;}
.queue{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;
}
.qshelf{
  display:flex;gap:4px;flex:0 0 auto;
  background:rgba(0,0,0,.25);
  border-radius:8px;padding:4px;
  opacity:.7;
}
.qslot{
  width:26px;height:26px;border-radius:6px;
  display:grid;place-items:center;font-size:15px;
  background:color-mix(in srgb, var(--c) 30%, var(--tile));
  filter:saturate(.9);
}
.qempty{color:var(--muted);font-size:12px;font-style:italic;padding:4px 2px;}

/* Board */
.board{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:8px 4px 14px;
  scrollbar-width:thin;
}
.board::-webkit-scrollbar{width:8px;}
.board::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:8px;}

.shelf{
  position:relative;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  padding-top:6px;
}
.shelf-plank{
  position:absolute;
  inset:auto 0 0 0;
  height:18px;
  background:
    linear-gradient(180deg,var(--wood-edge) 0%, var(--wood) 30%, var(--wood-2) 100%);
  border-radius:0 0 14px 14px;
  box-shadow:
    0 10px 18px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -3px 6px rgba(0,0,0,.4);
}
.shelf-plank::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 28px, rgba(0,0,0,.08) 28px 30px);
  border-radius:0 0 14px 14px;
}
.slots{
  position:relative;
  display:flex;
  justify-content:center;
  gap:clamp(8px,3vw,18px);
  padding:4px 10px 14px;
}

/* Slots */
.slot{
  width:var(--slot);
  height:var(--slot);
  border:none;
  border-radius:14px;
  background:var(--tile);
  position:relative;
  cursor:pointer;
  display:grid;place-items:center;
  box-shadow:
    0 6px 0 rgba(0,0,0,.18),
    0 10px 18px var(--tile-shadow),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .14s ease, box-shadow .2s ease;
  color:inherit;
  padding:0;
}
.slot .emoji{
  font-size:calc(var(--slot) * .58);
  line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
  transform:translateY(-2px);
}
.slot .glow{
  position:absolute;inset:0;border-radius:14px;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%);
  opacity:.55;pointer-events:none;
}
.slot:hover{transform:translateY(-3px);}
.slot:active{transform:translateY(-1px) scale(.97);}

.slot.empty{
  background:transparent;
  box-shadow:
    inset 0 0 0 2px dashed rgba(255,255,255,.18),
    inset 0 6px 18px rgba(0,0,0,.25);
  cursor:pointer;
}
html[data-theme="light"] .slot.empty,
:root:not([data-theme="dark"]) .slot.empty{
  box-shadow:inset 0 0 0 2px dashed rgba(80,50,20,.28), inset 0 6px 14px rgba(80,50,20,.08);
}
.slot.empty:hover{background:rgba(255,255,255,.04);}

.slot.sel{
  transform:translateY(-12px) scale(1.06);
  box-shadow:
    0 0 0 3px var(--accent),
    0 0 22px color-mix(in srgb,var(--accent) 60%, transparent),
    0 10px 22px var(--tile-shadow),
    inset 0 1px 0 rgba(255,255,255,.6);
  z-index:2;
}
.slot.sel::after{
  content:"";position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:7px solid var(--accent);
}

/* Clear animation */
.shelf.clearing .slot{
  animation:pop 0.5s ease forwards;
}
@keyframes pop{
  0%{transform:translateY(0) scale(1);}
  40%{transform:translateY(-22px) scale(1.18);box-shadow:0 0 30px var(--accent),0 14px 24px var(--tile-shadow);}
  100%{transform:translateY(-40px) scale(.2) rotate(20deg);opacity:0;}
}

/* Slide in from behind */
.slot.slidein{
  animation:slidein .42s cubic-bezier(.2,.8,.2,1.05) both;
}
@keyframes slidein{
  0%{transform:translateY(-70px) scale(.7);opacity:0;}
  60%{opacity:1;}
  100%{transform:translateY(0) scale(1);opacity:1;}
}

/* Hint */
.hint{
  text-align:center;
  font-size:12px;
  color:var(--ink-dim);
  margin:0;
  padding:0 8px;
  flex:0 0 auto;
}

/* Modal */
.modal{
  position:fixed;inset:0;
  background:rgba(10,6,3,.6);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
  z-index:50;
  padding:20px;
  animation:fade .25s ease;
}
.modal[hidden]{display:none;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  padding:28px 26px;
  text-align:center;
  max-width:360px;width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:rise .35s cubic-bezier(.2,.9,.2,1.1);
}
@keyframes rise{from{transform:translateY(20px) scale(.96);opacity:0;}to{transform:none;opacity:1;}}
.trophy{font-size:54px;animation:bounce 1.2s ease infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.modal-card h2{margin:8px 0 6px;font-size:22px;}
.modal-card p{margin:0 0 18px;color:var(--ink-dim);font-size:14px;}
.modal-actions{display:flex;gap:10px;justify-content:center;}

@media (max-width:420px){
  .topbar{gap:8px;}
  .stat{padding:5px 9px;min-width:52px;}
  .stat .val{font-size:16px;}
  .brand-text h1{font-size:16px;}
  .brand-text p{font-size:11px;}
  .actions .btn{padding:8px 11px;font-size:12px;}
  .iconbtn{padding:8px 9px;}
  :root{--slot:clamp(48px,22vw,72px);}
}

@media (max-width:360px){
  .stats{order:3;width:100%;justify-content:space-between;}
}