/* ============================================================
   🌈 The Secret Cow Level (/arcade) — Bryce's published games on
   a hellish red pasture, after Diablo's secret cow level ("There
   is no cow level"). Red portal in, blue town portal home.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; overflow-x: hidden;
  color: #e8d3a0;
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(160, 20, 10, .55), transparent 60%),
    radial-gradient(ellipse at 50% -20%, #3a0a06, transparent 70%),
    #120605;
}

/* ---- arrival: the red portal swirls open, then fades away ---- */
.portal-in {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: radial-gradient(circle, transparent 0 18%, #120605 60%);
  animation: arrive 1.4s ease-out forwards;
}
.portal-in::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff2a1a, #5a0000, #ff7a1a, #5a0000, #ff2a1a);
  filter: blur(6px);
  animation: swirl 1.4s ease-in forwards;
}
@keyframes arrive { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes swirl {
  0% { transform: scale(.2) rotate(0); opacity: 1; }
  100% { transform: scale(4) rotate(540deg); opacity: 0; }
}

/* ---- the blue town portal home ---- */
#town-portal {
  position: fixed; top: 14px; left: 14px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  color: #cfe4ff; text-decoration: none; font-weight: 700; font-size: 14px;
  background: rgba(10, 20, 50, .75); border: 1px solid #3a6ccf;
  box-shadow: 0 0 14px rgba(70, 130, 255, .35);
}
#town-portal:hover { box-shadow: 0 0 22px rgba(90, 160, 255, .7); }
.tp-swirl {
  width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(#9fd0ff, #1a3d99, #6fb0ff, #1a3d99, #9fd0ff);
  animation: spin 2.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- title ---- */
#hero { text-align: center; padding: 48px 16px 6px; }
.title {
  margin: 0; font-size: clamp(30px, 6.5vw, 58px); font-weight: 700; letter-spacing: 2px;
  color: #e8c070; text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 60, 20, .55), 0 3px 0 #3a0a06;
}
.nocow { margin: 8px 0 0; font-style: italic; color: #a8876a; font-size: clamp(14px, 2.2vw, 17px); }

/* ---- the pasture board ---- */
#pasture { display: flex; flex-direction: column; align-items: center; padding: 22px 14px 30px; }
.board {
  position: relative; width: min(92vw, 560px); aspect-ratio: 1 / 1;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 6px solid #5a0d08; border-radius: 10px;
  box-shadow: 0 0 40px rgba(200, 30, 10, .35), 0 12px 30px rgba(0, 0, 0, .6);
}
.sq.light { background: #6f7a2c; }            /* scorched grass */
.sq.dark  { background: #4a3a1a; }            /* trampled dirt */
.board::after {                               /* a red haze over the field */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 100%, rgba(170, 20, 0, .28), transparent 70%);
}

.cow {
  position: absolute; z-index: 1; width: 12.5%; height: 12.5%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}
.cow .glyph {
  font-size: clamp(24px, 5.8vw, 46px); line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6));
  animation: graze 3.2s ease-in-out infinite; animation-delay: var(--bob, 0s);
  transition: transform .15s ease;
}
.cow:hover .glyph, .cow:focus-visible .glyph { transform: scale(1.18) rotate(-6deg); animation-play-state: paused; }
@keyframes graze { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

.cow .flag {
  position: absolute; bottom: 74%; left: 50%; display: flex; align-items: flex-start;
  pointer-events: none; transition: transform .18s ease;
}
.cow:hover .flag, .cow:focus-visible .flag { transform: translateY(-3px); }
.flag-pole { width: 2px; height: 24px; background: #8a7a5a; border-radius: 2px; }
.flag-cloth {
  margin-top: 1px; padding: 3px 8px; white-space: nowrap;
  font: 700 12px/1.2 "Trebuchet MS", system-ui, sans-serif; color: #ffe9c2;
  background: #7a1208; border: 1px solid #c0392b; border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.empty { margin-top: 18px; color: #a8876a; font-style: italic; text-align: center; }

footer { text-align: center; padding: 10px 12px 40px; font-size: 14px; }
footer .dim { color: #7a5f4a; margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  .portal-in { display: none; }
  .cow .glyph, .tp-swirl { animation: none; }
}