@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

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

:root {
  --red: #ee1515;
  --red-dark: #c20f0f;
  --red-shadow: #7e0909;
  --panel: #fbfbf9;
  --panel-edge: #d8d8d2;
  --ink: #23241f;
  --muted: #7a7b73;
  --screen: #10140d;
  --screen-2: #1b2114;
  --screen-glow: #b6f24a;
  --gold: #ffc01e;

  --common: #9aa0a6;
  --uncommon: #35c05a;
  --rare: #3f8efc;
  --epic: #b257ff;
  --legendary: #ff9d0a;
  --undiscovered: #6f6f6f;
}

body {
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 50% -10%, #4a4a4a, #1c1c1c);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--ink);
  padding: 24px 14px 40px;
  display: flex;
  justify-content: center;
}

/* ── the Pokédex device shell ─────────────────────────────── */
#device {
  width: 100%;
  max-width: 760px;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  border-radius: 26px;
  border: 3px solid var(--red-shadow);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .25);
  padding: 20px;
}

.device-top { position: relative; padding: 6px 6px 12px; }

.lens {
  position: absolute; top: 0; left: 0;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bfe6ff, #1f6dd0 60%, #0d3a78);
  border: 4px solid #f7f7f5;
  box-shadow: 0 0 0 3px var(--red-shadow), 0 4px 8px rgba(0, 0, 0, .4);
}
.lens-shine {
  position: absolute; top: 9px; left: 11px;
  width: 14px; height: 10px;
  background: rgba(255, 255, 255, .85);
  border-radius: 50%; transform: rotate(-20deg);
}
.leds { position: absolute; top: 12px; left: 72px; display: flex; gap: 8px; }
.led { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .35); }
.led.red { background: #ff5b5b; box-shadow: 0 0 8px #ff5b5b; }
.led.yellow { background: #ffd23d; }
.led.green { background: #5bd75b; }

h1 {
  text-align: center; color: #fff; font-weight: 700;
  font-size: 2.5rem; letter-spacing: 1px;
  text-shadow: 0 3px 0 var(--red-shadow);
  padding-top: 8px;
}
h1 span { color: var(--gold); }
.tagline {
  text-align: center; color: rgba(255, 255, 255, .92);
  font-size: .92rem; font-weight: 400; margin-top: 2px;
}

.hinge {
  height: 10px; margin: 10px -20px;
  background: repeating-linear-gradient(90deg, var(--red-shadow) 0 14px, transparent 14px 22px);
  border-top: 2px solid var(--red-shadow);
  border-bottom: 2px solid rgba(255, 255, 255, .15);
}

.device-body { display: flex; flex-direction: column; gap: 16px; }

/* ── the LCD screen ───────────────────────────────────────── */
.screen {
  background: linear-gradient(180deg, var(--screen-2), var(--screen));
  border-radius: 14px;
  border: 3px solid #05060a;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .85), 0 0 0 6px rgba(255, 255, 255, .12);
  padding: 16px 16px 18px;
  color: var(--screen-glow);
}
.screen-label {
  display: flex; justify-content: space-between;
  font-size: .78rem; letter-spacing: 1.5px;
  color: #6f9a3a; text-transform: uppercase;
}

.digits { display: flex; justify-content: center; gap: 8px; margin: 14px 0 10px; }
.digits span {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(2.3rem, 11vw, 4rem); font-weight: 700;
  width: 1.05em; text-align: center;
  background: rgba(0, 0, 0, .35); border-radius: 8px;
  border: 1px solid rgba(182, 242, 74, .25);
  color: var(--screen-glow);
  text-shadow: 0 0 12px rgba(182, 242, 74, .7);
}
.digits span.flip { animation: flip .35s ease; }
@keyframes flip {
  0% { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0); opacity: 1; }
}

.countdown { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.countdown-bar {
  flex: 1; height: 12px; border-radius: 6px; overflow: hidden;
  background: rgba(0, 0, 0, .5); border: 1px solid rgba(182, 242, 74, .2);
}
#countdown-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #6f9a3a, var(--screen-glow));
  transition: width .25s linear;
}
#countdown-fill.low { background: linear-gradient(90deg, #ff5b5b, #ffd23d); }
#countdown-text {
  font-family: ui-monospace, monospace; font-size: 1rem;
  min-width: 3.5ch; text-align: right;
}

.current-matches {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 30px; margin-bottom: 12px;
}
.match-chip {
  font-size: .82rem; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(182, 242, 74, .3);
  display: inline-flex; align-items: center; gap: 5px;
}
.match-chip em { font-style: normal; font-size: .7rem; opacity: .85; }
.match-chip.have { color: #bfe6ff; border-color: #3f8efc; }
.match-chip.new {
  color: #1a1a1a; background: var(--gold);
  border-color: #fff; font-weight: 600;
  animation: pulse 1.1s infinite;
}
.match-chip.none { color: #6f9a3a; border-style: dashed; }
.match-chip.blocked { color: #8a9a5a; border-style: dashed; opacity: .85; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 4px var(--gold); }
  50% { box-shadow: 0 0 16px var(--gold); }
}

.harvest-row { display: flex; gap: 8px; }
#name-input {
  flex: 1; padding: 11px 12px; border-radius: 9px;
  border: 2px solid #3a4a28; background: #0a0d07;
  color: var(--screen-glow); font-family: inherit; font-size: 1rem;
}
#name-input::placeholder { color: #4f6b2c; }
#name-input:focus {
  outline: none; border-color: var(--screen-glow);
  box-shadow: 0 0 8px rgba(182, 242, 74, .4);
}
#harvest-btn {
  padding: 11px 22px; border-radius: 9px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 1rem; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--gold), #e0980a); color: #3a2600;
  box-shadow: 0 4px 0 #9c6a06;
  transition: transform .07s, box-shadow .07s, filter .07s;
}
#harvest-btn:hover { filter: brightness(1.07); }
#harvest-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c6a06; }
#harvest-btn:disabled {
  background: #3a4a28; color: #6f9a3a;
  box-shadow: 0 4px 0 #1f2a14; cursor: default;
}

.message { margin-top: 10px; min-height: 1.3em; font-size: .95rem; color: #cfe9a0; }
.message.win {
  color: var(--gold); font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 192, 30, .6);
}

/* ── stat tiles ───────────────────────────────────────────── */
.stats-bar { display: flex; gap: 10px; }
.stat {
  flex: 1; background: var(--panel);
  border-radius: 12px; border: 1px solid var(--panel-edge);
  padding: 10px; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.stat b { display: block; font-size: 1.5rem; color: var(--red-dark); font-weight: 700; }
.stat span {
  font-size: .76rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
}

/* ── dex + panels ─────────────────────────────────────────── */
.dex, .panel {
  background: var(--panel); border-radius: 14px;
  border: 1px solid var(--panel-edge);
  padding: 14px; box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.dex h2, .panel h2 {
  font-size: 1.05rem; font-weight: 600; color: var(--red-dark);
  margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;
}
.dex h2 small {
  text-transform: none; letter-spacing: 0;
  color: var(--muted); font-weight: 400; font-size: .8rem;
}

.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 9px;
}
.dex-cell {
  background: #fff; border-radius: 10px; padding: 9px 10px;
  border: 1px solid var(--panel-edge); border-left: 6px solid var(--common);
  display: flex; flex-direction: column; gap: 3px;
  opacity: .6; transition: transform .1s, box-shadow .15s;
}
.dex-cell.caught { opacity: 1; }
.dex-cell.rarity-common { border-left-color: var(--common); }
.dex-cell.rarity-uncommon { border-left-color: var(--uncommon); }
.dex-cell.rarity-rare { border-left-color: var(--rare); }
.dex-cell.rarity-epic { border-left-color: var(--epic); }
.dex-cell.rarity-legendary { border-left-color: var(--legendary); }
.dex-cell.rarity-undiscovered {
  border-left-color: var(--undiscovered); border-left-style: dashed;
}
.dex-cell.available {
  opacity: 1; border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(255, 192, 30, .6);
  animation: pulse 1.1s infinite;
}
.dex-cell.matches { box-shadow: 0 0 0 2px var(--rare); }
.dex-cell.blocked { opacity: .85; box-shadow: 0 0 0 1px #d9c277; }

.dex-head { display: flex; justify-content: space-between; align-items: flex-start; }
.dex-emoji { font-size: 1.5rem; filter: grayscale(.75); }
.dex-cell.caught .dex-emoji, .dex-cell.available .dex-emoji { filter: none; }
.dex-rarity {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .5px;
  text-align: right; color: var(--muted); line-height: 1.25;
}
.dex-rarity em { display: block; font-style: normal; color: #a8a8a2; font-size: .6rem; }
.dex-rarity em.odds { color: #c0c0ba; font-weight: 500; }
.rarity-common .dex-rarity { color: var(--common); }
.rarity-uncommon .dex-rarity { color: var(--uncommon); }
.rarity-rare .dex-rarity { color: var(--rare); }
.rarity-epic .dex-rarity { color: var(--epic); }
.rarity-legendary .dex-rarity { color: var(--legendary); }

.dex-name { font-weight: 600; font-size: .98rem; }
.dex-desc { font-size: .76rem; color: var(--muted); line-height: 1.25; }
.dex-caught { font-size: .74rem; color: var(--ink); margin-top: 2px; }
.dex-caught b { color: var(--red-dark); }
.dex-code { font-family: ui-monospace, monospace; color: var(--muted); margin-left: 5px; }
.dex-status { font-size: .72rem; color: #b3b3ad; font-style: italic; margin-top: 2px; }
.dex-status.avail { color: #c08800; font-weight: 600; font-style: normal; }

.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.leaderboard { list-style: none; }
.leaderboard li {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px dashed var(--panel-edge); font-size: .92rem;
}
.leaderboard li:last-child { border-bottom: none; }
.rank {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.lb-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.lb-score { font-weight: 700; color: var(--red-dark); }

.log { list-style: none; max-height: 280px; overflow-y: auto; }
.log li {
  font-size: .82rem; padding: 6px 0; line-height: 1.45;
  border-bottom: 1px dashed var(--panel-edge);
}
.log li:last-child { border-bottom: none; }
.log-name { font-weight: 600; }
.log-code { font-family: ui-monospace, monospace; color: var(--muted); }
.log-got { color: var(--uncommon); font-weight: 500; }
.log-nada { color: var(--muted); font-style: italic; }
.log-rarity {
  font-size: .68rem; text-transform: uppercase;
  font-weight: 700; letter-spacing: .5px;
}
.log-rarity.rarity-common { color: var(--common); }
.log-rarity.rarity-uncommon { color: var(--uncommon); }
.log-rarity.rarity-rare { color: var(--rare); }
.log-rarity.rarity-epic { color: var(--epic); }
.log-rarity.rarity-legendary { color: var(--legendary); }
.log-rarity.rarity-undiscovered { color: var(--undiscovered); }
.log-time { color: #b3b3ad; font-size: .74rem; }
.empty { color: var(--muted); font-style: italic; font-size: .86rem; }

footer {
  text-align: center; color: rgba(255, 255, 255, .8);
  font-size: .8rem; margin-top: 16px;
}
footer a { color: #fff; }

@media (max-width: 560px) {
  body { padding: 12px 8px 32px; }
  #device { padding: 14px; border-radius: 18px; }
  .panels { grid-template-columns: 1fr; }
  h1 { font-size: 2rem; }
  .lens { width: 42px; height: 42px; }
  .leds { left: 58px; top: 8px; }
  .dex-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}