/* Daily intro (about 1.2 s) and the achievement card. Home page only. */
.intro { display: none; }
html.intro-now .intro {
  display: grid; place-items: center; align-content: center; gap: 22px;
  position: fixed; inset: 0; z-index: 1000; background: var(--bg);
  animation: intro-out .3s ease-in .95s forwards;
}
.intro-scroll { display: flex; align-items: center; }
.roller { width: 16px; height: 150px; border-radius: 8px; background: linear-gradient(90deg, #7a4a1c, #c08a4a 45%, #6b3f15); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.intro-paper {
  width: 0; height: 128px; overflow: hidden; display: flex; align-items: center; justify-content: space-evenly;
  background: linear-gradient(180deg, #f7ead0, #efdcb4); border-top: 3px solid #d7bb86; border-bottom: 3px solid #d7bb86;
  animation: intro-unroll .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.fr {
  width: 84px; height: 62px; border-radius: 4px; border: 4px solid #22262e; opacity: 0; transform: translateX(30px);
  animation: intro-frame .3s ease-out forwards;
}
.fr1 { background: #3d6cc9; animation-delay: .25s; }
.fr2 { background: #2f9e76; animation-delay: .35s; }
.fr3 { background: #e5a00d; animation-delay: .45s; }
.intro-ready {
  font: 900 clamp(1.8rem, 1.2rem + 3vw, 3rem)/1 ui-monospace, "Courier New", monospace; letter-spacing: .18em;
  color: #e5a00d; text-shadow: 3px 3px 0 #1b2433, 6px 6px 0 rgba(0,0,0,.18);
  opacity: 0; transform: scale(2.2); animation: intro-stamp .22s steps(4, end) .62s forwards;
}
@keyframes intro-unroll { to { width: min(420px, 78vw); } }
@keyframes intro-frame { to { opacity: 1; transform: none; } }
@keyframes intro-stamp { to { opacity: 1; transform: scale(1); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* Achievement card */
.achv {
  position: fixed; right: 20px; top: 84px; z-index: 900; width: min(340px, calc(100vw - 40px));
  display: grid; grid-template-columns: 44px 1fr 24px; gap: 10px; align-items: start;
  padding: 14px 14px 14px 12px; border-radius: 14px; background: var(--panel); color: var(--ink);
  border: 2px solid #e5a00d; box-shadow: 0 12px 32px rgba(0,0,0,.25);
  animation: achv-in .35s cubic-bezier(.2,.9,.3,1.3);
}
.achv[hidden] { display: none; }
.achv-icon { font-size: 30px; line-height: 44px; text-align: center; background: color-mix(in srgb, #e5a00d 18%, var(--panel)); border-radius: 10px; }
.achv-title { display: block; font: 800 .8rem/1.2 ui-monospace, "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; color: #c2780a; }
.achv-text { margin: 4px 0 2px; font-size: .92rem; }
.achv-code { margin: 0 0 8px; font-size: .85rem; color: var(--muted); }
.achv-code b { color: var(--ink); letter-spacing: .04em; }
.achv-close { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px; }
.achv-close:hover { color: var(--ink); }
@keyframes achv-in { from { transform: translateY(-16px) scale(.96); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .achv { animation: none; } }
/* Phones: at the bottom (the ads are far down the page there). */
@media (max-width: 560px) { .achv { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; } }