/* DJ GATE (Login button + DJ Schedule tile) - rave.waov.art
   Colors match the page: green var(--accent, #25d9d0) borders, the rainbow conic from the hero buttons,
   and the mod schedule states (gold waiting, rainbow confirmed, red declined, green mine). */

#djGate { display: block; }
#djGate[hidden] { display: none; }

.dj-login-wrap { display: flex; justify-content: center; margin: .5rem 0 1.4rem; }
.dj-login-wrap[hidden] { display: none; }
.dj-login { font: inherit; }
.dj-login-note { text-align: center; color: rgba(238,241,245,.6); font-size: .8rem; margin: -1rem 0 1.2rem; min-height: 1em; }

.dj-tile {
  --dj-green: var(--accent, #25d9d0);
  --dj-gold: 220, 180, 90;
  --dj-red: 212, 104, 90;
  position: relative;
  margin: .4rem 0 1.4rem;
  border: 2px solid var(--dj-green);
  background: linear-gradient(155deg, rgba(15,15,15,.95), rgba(0,0,0,.98));
  animation: dj-in .35s ease both;
}
.dj-tile[hidden] { display: none; }
@keyframes dj-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* a reaction from Chad lights the border with the hero rainbow until it is seen */
@property --dj-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes dj-spin { to { --dj-angle: 360deg; } }
.dj-tile.has-news {
  border-color: transparent;
  background:
    linear-gradient(155deg, #0b0f0d, #000) padding-box,
    conic-gradient(from var(--dj-angle), #ff0040, #ff8000, #ffe000, #00d040, #00e0ff, #0060ff, #a000ff, #ff0040) border-box;
  animation: dj-spin 4s linear infinite;
}

.dj-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1.2rem; }
.dj-toggle {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 0;
}
.dj-kicker { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dj-green); }
.dj-who { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.05rem; color: #eafcea; }
.dj-chev { color: var(--dj-green); transition: transform .25s ease; }
.dj-tile.is-closed .dj-chev { transform: rotate(-90deg); }
.dj-out {
  background: none; border: 1px solid rgba(var(--accent-rgb, 37,217,208),.4); color: rgba(238,241,245,.75);
  font: inherit; font-size: .72rem; letter-spacing: .08em; padding: .3rem .7rem; cursor: pointer;
}
.dj-out:hover { background: rgba(var(--accent-rgb, 37,217,208),.1); color: #eafcea; }

.dj-body { padding: 0 1.2rem 1.3rem; }
.dj-tile.is-closed .dj-body { display: none; }
.dj-msg { min-height: 1.3em; margin: 0 0 .7rem; font-size: .85rem; color: rgba(238,241,245,.8); }
.dj-msg.bad { color: rgb(var(--dj-red)); }
.dj-msg.good { color: var(--dj-green); }
.dj-news {
  display: block; width: 100%; margin: 0 0 .8rem; padding: .5rem .8rem; text-align: left; cursor: pointer;
  background: rgba(var(--accent-rgb, 37,217,208),.08); border: 1px solid rgba(var(--accent-rgb, 37,217,208),.45); color: #eafcea; font: inherit; font-size: .85rem;
}

.dj-modes { display: flex; gap: .5rem; margin: 0 0 .9rem; flex-wrap: wrap; }
.dj-mode {
  background: none; border: 1px solid rgba(var(--accent-rgb, 37,217,208),.35); color: rgba(238,241,245,.75);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: .8rem; padding: .35rem .9rem; cursor: pointer;
}
.dj-mode.on { background: rgba(var(--accent-rgb, 37,217,208),.14); color: #eafcea; border-color: var(--dj-green); }
.dj-price { margin: 0 0 .8rem; font-size: .8rem; color: rgba(238,241,245,.6); }

.dj-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dj-grid { width: 100%; border-collapse: separate; border-spacing: 6px; font-family: 'Rajdhani', sans-serif; }
.dj-grid th {
  color: var(--dj-green); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: .85rem; padding: .35rem .4rem; text-align: center;
}
.dj-grid th.dj-date { text-align: left; color: rgba(238,241,245,.7); white-space: nowrap; }
.dj-grid th.pref { outline: 2px solid var(--dj-green); outline-offset: -2px; background: rgba(var(--accent-rgb, 37,217,208),.1); }

.dj-cell {
  width: 100%; min-width: 82px; min-height: 46px; padding: .3rem .4rem; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .04em;
  color: rgba(238,241,245,.85); background: rgba(255,255,255,.04); border: 1px solid rgba(var(--accent-rgb, 37,217,208),.18);
  transition: background .2s ease, border-color .2s ease;
}
.dj-cell small { display: block; font-weight: 400; font-size: .68rem; opacity: .8; letter-spacing: .02em; }
.dj-cell.st-open { color: var(--dj-green); font-size: 1.05rem; }
.dj-cell.st-open:hover { background: rgba(var(--accent-rgb, 37,217,208),.14); border-color: var(--dj-green); }
.dj-cell.st-requested { background: rgba(var(--dj-gold), .25); border-color: rgba(var(--dj-gold), .8); color: #fff3d0; }
.dj-cell.st-offered { background: rgba(var(--dj-gold), .3); border-color: rgba(var(--dj-gold), .95); color: #fff3d0; animation: dj-pulse 1.8s ease-in-out infinite; }
@keyframes dj-pulse { 50% { box-shadow: 0 0 14px rgba(var(--dj-gold), .7); } }
.dj-cell.st-confirmed, .dj-cell.st-taken {
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); border-color: rgba(255,255,255,.55);
  background: linear-gradient(110deg, #ff0040, #ff8000, #ffe000, #00d040, #00e0ff, #0060ff, #a000ff, #ff0040);
  background-size: 300% 100%; animation: dj-slide 5s linear infinite;
}
.dj-cell.st-taken { filter: saturate(.55) brightness(.8); cursor: default; }
@keyframes dj-slide { to { background-position: 300% 0; } }
.dj-cell.st-declined { background: rgba(var(--dj-red), .35); border-color: rgba(var(--dj-red), .85); color: #ffe0da; }
.dj-cell.st-unavail { opacity: .45; cursor: default; }
.dj-cell.mine { outline: 2px solid var(--dj-green); outline-offset: 1px; }
.dj-cell.lock::after { content: ' \1F512'; font-size: .7rem; }

.dj-pref-row { display: flex; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .4rem; }
.dj-chip {
  min-width: 108px; padding: .8rem 1rem; cursor: pointer; background: rgba(255,255,255,.04);
  border: 1px solid rgba(var(--accent-rgb, 37,217,208),.25); color: rgba(238,241,245,.8);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .05em;
}
.dj-chip.on { outline: 2px solid var(--dj-green); outline-offset: -2px; background: rgba(var(--accent-rgb, 37,217,208),.14); color: #eafcea; }

.dj-form { margin: 1rem 0 0; padding: 1rem; border: 1px solid rgba(var(--accent-rgb, 37,217,208),.4); background: rgba(var(--accent-rgb, 37,217,208),.05); }
.dj-form[hidden] { display: none; }
.dj-form h3 { margin: 0 0 .5rem; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; color: #eafcea; }
.dj-form textarea {
  width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box; padding: .6rem;
  background: rgba(0,0,0,.45); border: 1px solid rgba(var(--accent-rgb, 37,217,208),.3); color: #eafcea; font: inherit; font-size: .9rem;
}
.dj-form .row { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.dj-btn {
  background: rgba(var(--accent-rgb, 37,217,208),.14); border: 1px solid var(--dj-green); color: #eafcea; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; padding: .45rem 1rem;
}
.dj-btn:hover { background: rgba(var(--accent-rgb, 37,217,208),.26); }
.dj-btn.quiet { background: none; border-color: rgba(238,241,245,.3); color: rgba(238,241,245,.75); }
.dj-btn[disabled] { opacity: .4; cursor: not-allowed; }

.dj-cards { margin: 1.2rem 0 0; display: grid; gap: .5rem; }
.dj-cards h3 { margin: 0; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dj-green); font-weight: 400; }
.dj-card { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .7rem .9rem; border: 1px solid rgba(var(--accent-rgb, 37,217,208),.2); background: rgba(255,255,255,.03); }
.dj-card.flash { outline: 2px solid var(--dj-green); }
.dj-card b { font-family: 'Rajdhani', sans-serif; font-size: 1rem; color: #eafcea; }
.dj-card small { display: block; color: rgba(238,241,245,.6); }
.dj-pill { display: inline-block; margin-left: .5rem; padding: .05rem .5rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid; }
.dj-pill.requested { color: rgb(var(--dj-gold)); border-color: rgb(var(--dj-gold)); }
.dj-pill.offered { color: rgb(var(--dj-gold)); border-color: rgb(var(--dj-gold)); }
.dj-pill.confirmed { color: var(--dj-green); border-color: var(--dj-green); }
.dj-pill.declined { color: rgb(var(--dj-red)); border-color: rgb(var(--dj-red)); }
.dj-pill.unavailable { color: rgba(238,241,245,.5); border-color: rgba(238,241,245,.3); }
.dj-card .acts { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.dj-lockmsg { font-size: .72rem; color: rgba(238,241,245,.55); }

@media (max-width: 640px) {
  .dj-head { padding: .8rem .9rem; }
  .dj-body { padding: 0 .9rem 1.1rem; }
  .dj-cell { min-width: 70px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dj-tile, .dj-tile.has-news, .dj-cell.st-confirmed, .dj-cell.st-taken, .dj-cell.st-offered { animation: none; }
}

/* ===== GATE 5: Enter Now + members tile with two glide panels (v5 panel-travel style) ===== */
.dj-login { text-decoration: none; display: inline-block; }
.dj-login-note:empty { display: none; }

.rv-working { padding: 1.4rem 1.2rem; text-align: center; }
.rv-working-t { margin: 0; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dj-green); animation: rv-breathe 1.4s ease-in-out infinite; }
@keyframes rv-breathe { 50% { opacity: .35; } }

/* the smooth reveal after sign in: the tile grows open over 2s (pushing the tiles below it down),
   then everything inside fades in over .8s. Grid 0fr to 1fr animates to the natural height with no JS math. */
.rv-tile.rv-reveal { display: grid; animation: rv-grow 2s cubic-bezier(.22,1,.36,1) both; }
.rv-wrap { min-height: 0; overflow: hidden; }
.rv-tile.rv-reveal .rv-wrap > * { animation: rv-fade .8s ease 2s both; }
@keyframes rv-grow {
  from { grid-template-rows: 0fr; margin-top: 0; margin-bottom: 0; }
  to   { grid-template-rows: 1fr; }
}
@keyframes rv-fade { from { opacity: 0; filter: blur(5px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }

.rv-tile .dj-head { flex-wrap: wrap; row-gap: .5rem; }
.rv-pills { display: flex; gap: .5rem; margin-left: auto; }
.rv-pill {
  position: relative; background: none; border: 1px solid rgba(var(--accent-rgb, 37,217,208),.4); color: rgba(238,241,245,.8);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: .8rem; padding: .3rem 1.1rem; border-radius: 999px; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.rv-pill:hover { background: rgba(var(--accent-rgb, 37,217,208),.1); }
.rv-pill.on { background: rgba(var(--accent-rgb, 37,217,208),.18); border-color: var(--dj-green); color: #eafcea; }
.rv-pill.has-dot::after { content: ''; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--dj-gold)); box-shadow: 0 0 8px rgba(var(--dj-gold), .9); }

.rv-stage { position: relative; overflow: hidden; }
.rv-hint { margin: 0; padding: .4rem 0; font-size: .85rem; color: rgba(238,241,245,.55); }
.rv-panel { will-change: transform, opacity; }
.rv-panel.in-r { animation: rv-in-r .52s cubic-bezier(.22,1,.36,1) both; }
.rv-panel.in-l { animation: rv-in-l .52s cubic-bezier(.22,1,.36,1) both; }
.rv-panel.leaving { position: absolute; inset: 0 0 auto 0; pointer-events: none; }
.rv-panel.out-l { animation: rv-out-l .36s cubic-bezier(.22,1,.36,1) both; }
.rv-panel.out-r { animation: rv-out-r .36s cubic-bezier(.22,1,.36,1) both; }
@keyframes rv-in-r { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }
@keyframes rv-in-l { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }
@keyframes rv-out-l { to { opacity: 0; transform: translateX(-38px); } }
@keyframes rv-out-r { to { opacity: 0; transform: translateX(38px); } }
/* options stagger in after the panel lands */
.rv-panel.in-r .rv-in > *, .rv-panel.in-l .rv-in > * { animation: rv-rise .5s cubic-bezier(.22,1,.36,1) both; }
.rv-panel .rv-in > *:nth-child(1) { animation-delay: .12s; }
.rv-panel .rv-in > *:nth-child(2) { animation-delay: .17s; }
.rv-panel .rv-in > *:nth-child(3) { animation-delay: .22s; }
.rv-panel .rv-in > *:nth-child(4) { animation-delay: .27s; }
.rv-panel .rv-in > *:nth-child(5) { animation-delay: .32s; }
.rv-panel .rv-in > *:nth-child(n+6) { animation-delay: .36s; }
@keyframes rv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* photo panel, mirrored from teacher.html: upload step, 1:1 preview, Upload / Swap / Clear tiles */
.rv-h { margin: 1rem 0 .6rem; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dj-green); font-weight: 400; }
.rv-h:first-child { margin-top: 0; }
.rv-file { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rv-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; margin: 0 0 1rem; }
.rv-col { display: grid; gap: .45rem; }
.rv-kick { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(238,241,245,.6); }
.rv-or { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(238,241,245,.45); }
.rv-step {
  min-height: 52px; cursor: pointer; padding: .6rem 1rem; color: #eafcea;
  background: rgba(var(--accent-rgb, 37,217,208),.1); border: 1px solid var(--dj-green);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem;
  animation: rv-glow 2.5s ease-in-out infinite;
}
.rv-step:hover { background: rgba(var(--accent-rgb, 37,217,208),.22); }
@keyframes rv-glow { 50% { box-shadow: 0 0 16px rgba(var(--accent-rgb, 37,217,208),.45); } }
.rv-linkrow { display: flex; gap: .5rem; }
.rv-linkin { flex: 1; min-width: 0; padding: .55rem .7rem; background: rgba(0,0,0,.45); border: 1px solid rgba(var(--accent-rgb, 37,217,208),.3); color: #eafcea; font: inherit; font-size: .85rem; }
.rv-linkin:focus { outline: none; border-color: var(--dj-green); }
@media (max-width: 560px) { .rv-split { grid-template-columns: 1fr; } .rv-or { text-align: center; } }

.rv-preview { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 1rem; align-items: start; margin: 0 0 1rem; animation: rv-rise .35s cubic-bezier(.16,1,.3,1) both; }
.rv-frame { aspect-ratio: 1 / 1; border: 1px solid var(--dj-green); background: rgba(0,0,0,.5); overflow: hidden; display: grid; place-items: center; }
.rv-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-linkprev { margin: 0; padding: .6rem; font-size: .75rem; color: rgba(238,241,245,.7); word-break: break-all; }
.rv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.rv-action {
  cursor: pointer; padding: .7rem .4rem; text-align: center; color: rgba(238,241,245,.85);
  background: rgba(255,255,255,.04); border: 1px solid rgba(var(--accent-rgb, 37,217,208),.25);
  font-family: 'Rajdhani', sans-serif; transition: background .2s ease, border-color .2s ease;
}
.rv-action b { display: block; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.rv-action small { display: block; margin-top: .15rem; font-size: .68rem; opacity: .7; }
.rv-action:hover { background: rgba(var(--accent-rgb, 37,217,208),.12); border-color: var(--dj-green); }
.rv-action.rv-save { color: var(--dj-green); border-color: var(--dj-green); }
@media (max-width: 560px) { .rv-preview { grid-template-columns: 1fr; } .rv-frame { max-width: 220px; } }

.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.rv-grid > p { grid-column: 1 / -1; margin: 0; }
.rv-thumb { border: 1px solid rgba(var(--accent-rgb, 37,217,208),.25); background: rgba(255,255,255,.03); }
.rv-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.rv-thumb-acts { display: flex; gap: .3rem; padding: .35rem; }
.rv-thumb-acts .dj-btn { flex: 1; padding: .3rem .2rem; font-size: .68rem; }

.rv-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.rv-spot { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; text-align: center; overflow: hidden;
  border: 1px dashed rgba(var(--accent-rgb, 37,217,208),.3); background: rgba(255,255,255,.03); color: rgba(238,241,245,.5); font-size: .75rem; letter-spacing: .06em; }
.rv-spot.has { border-style: solid; border-color: var(--dj-green); }
.rv-spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-spot small { position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem; background: rgba(0,0,0,.65); color: #eafcea; font-size: .7rem; }

/* Our DJs tile on the page, filled from the 7 featured spots */
.blank-cell.has-photo { background-size: cover !important; background-position: center !important; }
.blank-cell.has-photo .blank-cell-label { text-shadow: 0 1px 4px #000, 0 0 10px #000; }

@media (prefers-reduced-motion: reduce) {
  .rv-tile.rv-reveal, .rv-tile.rv-reveal .rv-wrap > *, .rv-panel.in-r, .rv-panel.in-l, .rv-panel.out-l, .rv-panel.out-r, .rv-step, .rv-working-t { animation: none; }
  .rv-panel .rv-in > * { animation: none !important; }
}

/* Enter Now: centered in the page column */
#djGate { width: 100%; }
.dj-login-wrap { width: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-left: auto; margin-right: auto; }
.dj-login-wrap .dj-login { margin: 0 auto; }
.dj-login-wrap .dj-login-note { margin: .6rem 0 0; }

/* Enter Now uses the same pick-tile look as Schedule and Our DJs */
a.pick-tile.dj-login { text-decoration: none; display: inline-flex; width: auto; animation: none; }

/* Members tile: same spinning rainbow border as Enter Now, 2px thick, always on */
.dj-tile.rv-tile {
  border: 2px solid transparent;
  background:
    linear-gradient(155deg, #0b0f0d, #000) padding-box,
    conic-gradient(from var(--dj-angle), #ff0040, #ff8000, #ffe000, #00d040, #00e0ff, #0060ff, #a000ff, #ff0040) border-box;
  animation: dj-in .25s ease both, dj-spin 4s linear infinite;
}
.rv-tile.rv-reveal { animation: rv-grow 2s cubic-bezier(.22,1,.36,1) both, dj-spin 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .dj-tile.rv-tile, .rv-tile.rv-reveal { animation: none; } }

/* Requests live on the $5 tiles: only a slot you requested glows, and tapping it opens this bar under the grid */
.dj-cell.st-requested { animation: dj-soft 2.6s ease-in-out infinite; }
@keyframes dj-soft { 50% { box-shadow: 0 0 12px rgba(var(--dj-gold), .55); } }
.dj-cell.open { outline: 2px solid #fff; outline-offset: 1px; }
.dj-count { margin: .2rem 0 .5rem; font-size: .8rem; color: rgba(238,241,245,.75); }
.dj-act { margin: .7rem 0 0; padding: .7rem .9rem; border: 1px solid rgba(var(--dj-gold), .6); background: rgba(255,255,255,.04); display: grid; gap: .45rem; }
.dj-act[hidden] { display: none; }
.dj-act b { font-family: 'Rajdhani', sans-serif; letter-spacing: .04em; color: #eafcea; }
.dj-act small { color: rgba(238,241,245,.75); }
.dj-act .acts { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .dj-cell.st-requested { animation: none; } }