* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  padding: 0;
  background: #05070a;
  color: #f7f8fb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* One screen: nav, the Event strip, and the board filling what is left. */
.public-event-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 14px;
  background:
    radial-gradient(circle at 78% 10%, rgba(255, 170, 60, 0.14), transparent 30%),
    radial-gradient(circle at 12% 90%, rgba(112, 227, 255, 0.1), transparent 30%),
    #05070a;
}

.public-event-nav {
  flex: none;
  width: min(100%, 1080px);
  min-height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.public-event-brand,
.public-event-install,
.public-event-open {
  color: inherit;
  text-decoration: none;
}

.public-event-brand { display: inline-flex; align-items: center; }

.public-event-logo {
  width: 80px;
  height: 80px;
  display: block;
}

.public-event-install {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-weight: 700;
  font-size: 13px;
}

.public-event-strip {
  flex: none;
  width: min(100%, 1080px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.public-event-copy { min-width: 0; }

.public-event-eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.public-event-title {
  margin: 0;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1;
  font-weight: 900;
}

.public-event-body {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
}

.public-event-open {
  flex: none;
  padding: 12px 20px;
  border-radius: 999px;
  background: #2ce86e;
  color: #05070a;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
}

/* With a rail: the nav spans the top, the rail sits left, the Event fills
   the rest. Without one the shell is a single column, as before. */
.public-event-shell-railed {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 20px;
  /* One column of content: the nav, the rail and the board share edges. */
  width: min(100%, 1112px);
  margin: 0 auto;
}

.public-event-shell-railed .public-event-nav { grid-column: 1 / -1; width: 100%; }

.public-event-main {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.public-event-rail {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.public-event-rail-title,
.public-event-rail-dates {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.public-event-rail-title { margin: 0 0 10px; }
.public-event-rail-list + .public-event-rail-title { margin-top: 18px; }
.public-event-rail-item-past .public-event-rail-link { opacity: 0.72; }

.public-event-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.public-event-rail-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
}

.public-event-rail-item-current .public-event-rail-link {
  border-color: #2ce86e;
  background: rgba(44, 232, 110, 0.1);
}

.public-event-rail-link:hover,
.public-event-rail-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
}

.public-event-rail-thumb {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: #0c0f16;
}

.public-event-rail-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.public-event-rail-name {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-event-index-empty {
  margin: 6px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

/* The board takes the remaining height and stays square: the grid is the
   smaller of the board's two sides, measured as a size container, so a tall
   phone gives a width-bound square and a wide desktop a height-bound one. */
.public-event-board {
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: center;
}

.public-event-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.public-event-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.public-event-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.public-event-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.public-event-tile {
  position: relative;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0c0f16;
}

.public-event-tile-face {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.public-event-tile-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transition: transform 180ms ease;
}

.public-event-focus-tl .public-event-tile-art { object-position: 0% 0%; }
.public-event-focus-tc .public-event-tile-art { object-position: 50% 0%; }
.public-event-focus-tr .public-event-tile-art { object-position: 100% 0%; }
.public-event-focus-ml .public-event-tile-art { object-position: 0% 50%; }
.public-event-focus-mr .public-event-tile-art { object-position: 100% 50%; }
.public-event-focus-bl .public-event-tile-art { object-position: 0% 100%; }
.public-event-focus-bc .public-event-tile-art { object-position: 50% 100%; }
.public-event-focus-br .public-event-tile-art { object-position: 100% 100%; }

.public-event-tile-face:hover .public-event-tile-art,
.public-event-tile-face:focus-visible .public-event-tile-art {
  transform: scale(1.04);
}

.public-event-tile-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 8px 8px;
  background: linear-gradient(180deg, rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0.86) 60%);
}

.public-event-tile-title {
  display: block;
  font-weight: 900;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* The opened quest: a modal, shown while its square is the URL's target. */
.public-event-quest {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overscroll-behavior: contain;
}

.public-event-quest:target { display: flex; }

body:has(.public-event-quest:target) .public-event-shell {
  pointer-events: none;
  filter: blur(2px);
}

.public-event-quest-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 10, 0.78);
}

/* The art and the copy share one cell: the card is the art's size, and the
   copy sits on its lower part, scrolling inside itself when the text is
   longer than the art is tall (a short landscape phone) rather than clipping. */
.public-event-quest-card {
  position: relative;
  display: grid;
  grid-template-areas: "card";
  max-height: 100%;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0c0f16;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* The art whole, at its own shape, sized to the screen. */
.public-event-quest-art {
  grid-area: card;
  display: block;
  max-height: calc(100dvh - 32px);
  max-width: calc(100vw - 32px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.public-event-quest-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(5, 7, 10, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: inherit;
  text-decoration: none;
  font-weight: 900;
}

/* The detail on the art, the way the app's EXP screen lays it over the hero. */
.public-event-quest-copy {
  grid-area: card;
  align-self: end;
  max-height: 100%;
  overflow-y: auto;
  padding: 36px 20px 20px;
  background: linear-gradient(180deg, rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0.78) 26px, rgba(5, 7, 10, 0.94) 100%);
}

.public-event-quest-title {
  margin: 0;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.public-event-quest-meta {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ffc861;
}

.public-event-quest-detail {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.public-event-quest-copy .public-event-open {
  display: inline-block;
  margin-top: 16px;
}

@media (max-width: 720px) {
  .public-event-shell { gap: 8px; padding: 0 10px 10px; }
  /* The rail becomes one row of chips under the nav. */
  .public-event-shell-railed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 0; }
  .public-event-rail { overflow-x: auto; overflow-y: hidden; padding: 0 0 4px; }
  .public-event-rail-title { display: none; }
  .public-event-rail { display: flex; gap: 6px; }
  .public-event-rail-list { display: flex; gap: 6px; }
  .public-event-rail-list + .public-event-rail-title { margin: 0; }
  .public-event-rail-item { flex: none; }
  .public-event-rail-link { padding: 4px 8px 4px 4px; }
  .public-event-rail-thumb { width: 32px; height: 32px; }
  .public-event-rail-dates { display: none; }
  .public-event-rail-name { font-size: 12px; }
  .public-event-nav { min-height: 72px; }
  .public-event-logo { width: 60px; height: 60px; }
  .public-event-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
  .public-event-body { display: none; }
  .public-event-strip .public-event-open { padding: 10px 16px; font-size: 13px; }
  .public-event-grid { gap: 4px; }
  .public-event-tile { border-radius: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-event-tile-art { transition: none; }
}