@import url('./machine.css');
@import url('./dome.css');
@import url('./tray.css');
@import url('./modal.css');

:root {
  --cream:    #FFF8F2;
  --body-top: #F2EDE6;
  --body-mid: #E8E0D5;
  --body-shd: #C8BFB5;
  --pink:     #FF6B9D;
  --yellow:   #FFD166;
  --mint:     #4ECDC4;
  --blue:     #74B9FF;
  --purple:   #A29BFE;
  --gold:     #FFD700;
  --ink:      #2D2A26;
  --mid:      #6B6560;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: #FDEEF5;
  background-image:
    radial-gradient(ellipse at 15% 15%, #FFE4EF 0%, transparent 55%),
    radial-gradient(ellipse at 85% 85%, #DEE8FF 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 16px 48px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  overflow-x: hidden;
}

.site-title {
  font-family: 'DotGothic16', monospace;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: var(--ink);
  letter-spacing: 0.12em;
  text-align: center;
}
.site-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--mid);
  text-align: center;
  margin-top: 4px;
  margin-bottom: 22px;
}

.hint-line {
  margin-top: 12px;
  font-size: 11.5px; font-weight: 700; color: var(--mid);
  text-align: center; min-height: 18px;
  font-family: 'DotGothic16', monospace; letter-spacing: 0.06em;
}

.collection-wrap { margin-top: 18px; text-align: center; max-width: 340px; }
.collection-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--mid); font-family: 'DotGothic16', monospace; }

/* Collapsed toggle — collection stays hidden until clicked so the chip strip
   doesn't spoil future pulls. */
.collection-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: white;
  border: 1.5px solid #DDD4C8;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.collection-toggle:hover { border-color: var(--pink); color: var(--pink); }
.collection-toggle:hover .collection-label { color: var(--pink); }
.collection-toggle .collection-count {
  display: inline-block;
  min-width: 22px; padding: 1px 6px;
  background: var(--pink); color: white;
  border-radius: 10px;
  font-size: 10px; font-weight: 900;
  font-family: 'DotGothic16', monospace;
}
.collection-toggle .collection-caret {
  font-size: 9px; color: var(--mid);
  transition: transform 0.2s;
}
.collection-toggle.open .collection-caret { transform: rotate(180deg); }
@keyframes collectionPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,107,157,0.55); }
  50%  { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(255,107,157,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,107,157,0); }
}
.collection-toggle.has-new {
  animation: collectionPulse 0.9s ease-out;
  border-color: var(--pink);
}

.collection-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.collection-chips[hidden] { display: none !important; }
.chip {
  background: white; border: 2px solid #E0D8CE;
  border-radius: 20px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; color: var(--mid);
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,.07);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s, color 0.12s;
}
.chip:hover {
  transform: translateY(-1px);
  border-color: var(--pink);
  color: var(--pink);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.chip:active { transform: translateY(0); }
.chip.new-chip { border-color: var(--pink); color: var(--pink); animation: chipPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.chip-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
@keyframes chipPop { from { transform: scale(0.5); } to { transform: scale(1); } }

.machine-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.mnav-btn {
  font-family: 'DotGothic16', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--mid);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid #DDD4C8;
  background: rgba(255,255,255,0.7);
  transition: all 0.15s;
  text-transform: uppercase;
}
.mnav-btn:hover { border-color: var(--pink); color: var(--pink); }
.mnav-btn.active {
  background: var(--pink);
  color: white;
  border-color: var(--pink);
  box-shadow: 0 2px 8px rgba(255,107,157,0.35);
}

@media (max-width: 380px) {
  .dome-outer { width: 200px; }
  .dome-collar { width: 218px; }
  .machine-body { width: 238px; }
  .crank-btn { width: 54px; height: 54px; }
}