/* ============================================================
   ~*~*~ DASHBOARD PALOOZA :: Y2K / NEOPETS EDITION ~*~*~
   warning: maximum nostalgia. comic sans ahead. ♥
   ============================================================ */

:root {
  --hot-pink: #ff33aa;
  --purple: #8a2be2;
  --cyan: #00e5ff;
  --lime: #aaff00;
  --yellow: #ffea00;
  --orange: #ff7b00;
  --ink: #1a0033;
  --panel: #fff0fb;
  --panel-2: #e6faff;
  --bevel-lt: #ffffff;
  --bevel-dk: #7a2d6b;
}

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

body {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", cursive;
  color: var(--ink);
  /* tiled starry space bg, drawn as an SVG data-uri so it works offline */
  background-color: #2a004f;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><rect width='80' height='80' fill='%232a004f'/><g fill='%23fff7b0'><circle cx='10' cy='12' r='1.4'/><circle cx='55' cy='30' r='1'/><circle cx='30' cy='60' r='1.6'/><circle cx='70' cy='68' r='1.1'/></g><g fill='%2300e5ff'><circle cx='65' cy='8' r='1'/><circle cx='20' cy='40' r='1'/></g><g fill='%23ff33aa'><circle cx='44' cy='52' r='1.2'/><circle cx='5' cy='70' r='1'/></g><text x='40' y='24' font-size='10' text-anchor='middle' fill='%23ffea00'>%E2%9C%A6</text><text x='15' y='55' font-size='8' text-anchor='middle' fill='%23aaff00'>%E2%98%85</text></svg>");
  background-attachment: fixed;
}

.hidden { display: none !important; }

/* tiny pixel-y scrollbar (webkit) */
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: #4b008a; }
::-webkit-scrollbar-thumb { background: var(--hot-pink); border: 2px outset var(--cyan); }

/* ---------- shared bevel button look ---------- */
.btn {
  font-family: inherit; font-weight: bold; cursor: pointer; color: var(--ink);
  background: linear-gradient(180deg, #fff 0%, #ffd6f3 45%, #ff9ee0 100%);
  border: 3px outset var(--hot-pink);
  border-radius: 6px; padding: 7px 14px; font-size: 14px;
  text-shadow: 1px 1px 0 #fff;
}
.btn:hover { background: linear-gradient(180deg, #fff 0%, #d6fbff 45%, #9ef0ff 100%); border-color: var(--cyan); }
.btn:active { border-style: inset; transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; border-style: outset; }
.btn-primary {
  background: linear-gradient(180deg, #fffec2 0%, var(--yellow) 40%, var(--orange) 100%);
  border-color: var(--orange); font-size: 16px;
}
.btn-lg { width: 100%; padding: 12px; font-size: 18px; }
.btn-sm { padding: 3px 9px; font-size: 12px; }
.btn-ghost { background: #fff; border: 2px outset #ccc; }

/* ---------- name gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(40,0,80,.78);
  display: flex; align-items: center; justify-content: center;
}
.gate-card {
  background:
    repeating-linear-gradient(45deg, #fff0fb 0 14px, #ffe3f7 14px 28px);
  border: 6px ridge var(--hot-pink);
  border-radius: 14px; padding: 32px; width: min(480px, 92vw);
  text-align: center; box-shadow: 0 0 0 4px var(--yellow), 0 0 40px var(--purple);
  animation: wobble .5s ease both;
}
.gate-emoji { font-size: 56px; animation: spin 4s linear infinite; }
.gate-card h1 { margin: 6px 0; font-size: 24px; color: var(--purple); }
.gate-card p { color: #b3007a; margin: 0 0 18px; font-size: 15px; }
.name-select {
  width: 100%; padding: 11px; font-size: 16px; font-family: inherit;
  background: #fff; color: var(--ink);
  border: 3px inset var(--cyan); border-radius: 6px; margin-bottom: 16px; cursor: pointer;
}
@keyframes wobble { 0%{transform:rotate(-3deg) scale(.8);opacity:0} 60%{transform:rotate(2deg) scale(1.04)} 100%{transform:rotate(0) scale(1);opacity:1} }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- scrolly marquee bar ---------- */
.marquee-bar {
  background: linear-gradient(90deg, var(--hot-pink), var(--purple), var(--cyan), var(--lime), var(--yellow), var(--hot-pink));
  background-size: 300% 100%;
  animation: rainbow 8s linear infinite;
  color: #fff; font-weight: bold; padding: 5px 0; font-size: 15px;
  text-shadow: 1px 1px 2px #000; border-bottom: 3px ridge var(--yellow);
}
@keyframes rainbow { to { background-position: 300% 0; } }

/* ---------- header ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; gap: 16px; flex-wrap: wrap;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,240,251,.92));
  border-bottom: 4px double var(--purple);
}
.header-left { display: flex; align-items: center; gap: 14px; }
.logo { font-size: 42px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-6deg); } }

.glitter-text {
  margin: 0; font-size: 30px; font-weight: bold;
  background: linear-gradient(90deg, var(--hot-pink), var(--orange), var(--yellow), var(--lime), var(--cyan), var(--purple), var(--hot-pink));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 6s linear infinite;
  filter: drop-shadow(2px 2px 0 #fff);
}
.subtitle { color: var(--purple); font-size: 14px; font-weight: bold; }

.whoami {
  display: flex; align-items: center; gap: 7px;
  background: #fff; border: 3px outset var(--cyan);
  padding: 5px 10px; border-radius: 8px; font-size: 13px;
}
.whoami-label { color: var(--purple); font-size: 11px; }
.whoami strong { color: var(--hot-pink); font-size: 15px; }

.sync-pill {
  display: flex; align-items: center; gap: 6px;
  background: #000; border: 2px inset #888;
  padding: 5px 10px; border-radius: 4px; font-size: 12px;
  color: var(--lime); font-family: "Courier New", monospace;
}
.sync-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.sync-pill.live .sync-dot { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.sync-pill.live { color: var(--lime); }
.sync-pill.saving .sync-dot { background: var(--yellow); animation: blinker 1s step-start infinite; }
.sync-pill.error .sync-dot { background: #ff2d2d; }
.sync-pill.error { color: #ff7b7b; }

/* ---------- blinky status98 bar ---------- */
.status98 {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #000; color: #0f0; font-family: "Courier New", monospace;
  font-size: 13px; padding: 6px 18px; border-bottom: 2px solid var(--lime);
}
.blink { color: #ff2d2d; font-weight: bold; animation: blinker 1s step-start infinite; }
@keyframes blinker { 50% { opacity: 0; } }
.construction { color: var(--yellow); font-weight: bold; }
.hit-counter { color: #fff; }
.counter-digits {
  background: #000; color: #0f0; border: 1px solid #0f0;
  padding: 1px 4px; letter-spacing: 3px; font-weight: bold;
}
.best-viewed { color: var(--cyan); margin-left: auto; }

/* ---------- scoreboard ---------- */
.scoreboard {
  display: flex; gap: 12px; padding: 16px 22px 4px; flex-wrap: wrap; align-items: center;
}
.stat {
  background: linear-gradient(180deg, #fff, var(--panel-2));
  border: 4px ridge var(--cyan); border-radius: 10px;
  padding: 8px 16px; min-width: 100px; text-align: center;
}
.stat .num { font-size: 26px; font-weight: bold; color: var(--purple); line-height: 1; }
.stat .lbl { color: #b3007a; font-size: 12px; margin-top: 3px; }
.stat.done { border-color: var(--lime); }
.stat.done .num { color: #2e9e00; }
.stat.progress { border-color: var(--orange); }
.stat.progress .num { color: var(--orange); }

.leaderboard {
  margin-left: auto; min-width: 320px; max-width: 460px; flex: 1 1 340px;
  background: linear-gradient(180deg, #fff, var(--panel-2));
  border: 4px ridge var(--purple); border-radius: 12px; padding: 8px 12px 10px;
  box-shadow: 0 0 0 3px var(--yellow), 0 4px 14px rgba(0,0,0,.35);
}
.lb-header {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px;
}
.lb-title {
  font-size: 16px; font-weight: bold; letter-spacing: 2px;
  background: linear-gradient(90deg, var(--hot-pink), var(--orange), var(--yellow), var(--lime), var(--cyan), var(--purple), var(--hot-pink));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: rainbow 6s linear infinite;
  filter: drop-shadow(1px 1px 0 #fff);
}
.lb-trophy { font-size: 18px; animation: bob 2.4s ease-in-out infinite; }
.lb-empty { text-align: center; color: var(--purple); font-size: 13px; font-weight: bold; padding: 6px; }

.lb-list { display: flex; flex-direction: column; gap: 5px; }
.lb-row { display: flex; align-items: center; gap: 8px; }
.lb-rank { width: 26px; text-align: center; font-size: 16px; font-weight: bold; color: var(--purple); flex-shrink: 0; }
.lb-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold; color: #fff; border: 1px solid #fff;
  box-shadow: 0 0 0 1px var(--ink);
}
.lb-barwrap {
  flex: 1; background: rgba(138,43,226,.12); border: 1px solid var(--bevel-dk);
  border-radius: 6px; overflow: hidden; min-width: 60px; height: 22px;
}
.lb-bar {
  height: 100%; display: flex; align-items: center; padding: 0 8px;
  border-radius: 5px; min-width: 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.2);
  animation: lb-grow .6s cubic-bezier(.2,1.2,.4,1) both;
  background-size: 18px 18px;
  background-image: linear-gradient(135deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%);
}
@keyframes lb-grow { from { width: 0 !important; } }
.lb-name {
  font-size: 12px; font-weight: bold; color: #fff; white-space: nowrap;
  text-shadow: 1px 1px 1px rgba(0,0,0,.55);
}
.lb-cnt {
  flex-shrink: 0; min-width: 26px; text-align: center; font-weight: bold; font-size: 15px;
  color: var(--ink); background: #fff; border: 2px outset var(--hot-pink);
  border-radius: 6px; padding: 1px 6px;
}
.lb-row.lb-leader .lb-rank { font-size: 19px; animation: bob 1.8s ease-in-out infinite; }
.lb-row.lb-leader .lb-cnt { border-color: var(--orange); color: var(--orange); }
.lb-row.lb-dinh .lb-bar { animation: lb-grow .6s cubic-bezier(.2,1.2,.4,1) both, dinhglow 1.6s ease-in-out infinite; }
.lb-row.lb-dinh .lb-cnt { background: linear-gradient(180deg, #fffec2, var(--yellow)); border-color: var(--orange); }

/* ---------- controls ---------- */
.controls { display: flex; gap: 12px; padding: 14px 22px; flex-wrap: wrap; align-items: center; }
.search {
  flex: 1; min-width: 220px; padding: 10px 14px; font-size: 15px; font-family: inherit;
  background: #fff; color: var(--ink);
  border: 3px inset var(--cyan); border-radius: 6px;
}
.search::placeholder { color: #c77; }
.filter-group { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  background: linear-gradient(180deg, #fff, #ffeaf8); color: var(--purple); cursor: pointer;
  border: 3px outset var(--hot-pink); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; font-family: inherit; font-weight: bold;
}
.chip:hover { background: linear-gradient(180deg, #fff, #d6fbff); border-color: var(--cyan); }
.chip.active {
  background: linear-gradient(180deg, var(--yellow), var(--orange));
  color: var(--ink); border-style: inset; border-color: var(--orange);
}

/* ---------- the grid ---------- */
main { padding: 0 22px 30px; }
.grid {
  width: 100%; border-collapse: separate; border-spacing: 0 7px;
  background: rgba(255,255,255,.06); padding: 6px; border-radius: 10px;
}
.grid thead th {
  text-align: left; color: #fff; font-size: 14px; font-weight: bold;
  padding: 6px 12px; text-shadow: 1px 1px 2px #000; letter-spacing: .5px;
}
.grid tbody tr {
  background: linear-gradient(180deg, #ffffff, var(--panel));
  border: 2px solid var(--hot-pink);
}
.grid tbody tr:nth-child(even) { background: linear-gradient(180deg, #ffffff, var(--panel-2)); }
.grid tbody tr:hover { outline: 3px dashed var(--yellow); }
.grid tbody td {
  padding: 10px 12px; border-top: 2px solid #fff; border-bottom: 2px solid var(--bevel-dk);
  vertical-align: middle;
}
.grid tbody td:first-child { border-left: 2px solid #fff; border-radius: 8px 0 0 8px; }
.grid tbody td:last-child { border-right: 2px solid var(--bevel-dk); border-radius: 0 8px 8px 0; }

tr.done-row { background: linear-gradient(180deg, #f0fff0, #d8ffd8) !important; }
tr.done-row td:first-child { border-left: 5px solid var(--lime); }
tr.mine-row td:first-child { border-left: 5px solid var(--hot-pink); }

.dash-title { font-size: 15px; font-weight: bold; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.tag { font-size: 11px; background: var(--purple); color: #fff; padding: 1px 7px; border-radius: 4px; border: 1px outset var(--cyan); }
.badge-dupe { font-size: 11px; background: var(--yellow); color: var(--ink); padding: 1px 7px; border-radius: 4px; border: 1px outset var(--orange); font-weight: bold; }
.badge-temp { font-size: 11px; background: #ff2d2d; color: #fff; padding: 1px 7px; border-radius: 4px; border: 1px outset #ffb3b3; font-weight: bold; }

.src { font-family: "Courier New", monospace; font-size: 12px; padding: 2px 8px; border-radius: 5px; white-space: nowrap; font-weight: bold; border: 2px outset; }
.src.committed { background: var(--cyan); color: var(--ink); border-color: #7af0ff; }
.src.grafana { background: var(--purple); color: #fff; border-color: #c79bff; }

/* dibs */
.dibs-open, .dibs-owned { display: flex; align-items: center; gap: 8px; }
.btn-dibs {
  background: linear-gradient(180deg, #fffec2, var(--yellow) 40%, var(--orange));
  border: 3px outset var(--orange); color: var(--ink); font-size: 14px;
  animation: throb 1.4s ease-in-out infinite;
}
@keyframes throb { 50% { transform: scale(1.06); } }
.owner-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 2px outset var(--hot-pink);
  padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: bold;
}
.owner-badge .avatar {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: bold; color: #fff;
  border: 1px solid #fff; box-shadow: 0 0 0 1px var(--ink);
}
.btn-release { background: #fff; border: 2px outset #d99; color: #b00; }
.btn-release:hover { background: #ffe0e0; }

/* action select + note */
.action-select, .note-input {
  background: #fff; color: var(--ink); font-family: inherit;
  border: 3px inset var(--cyan); border-radius: 6px; padding: 6px 9px; font-size: 13px; font-weight: bold;
}
.action-select { cursor: pointer; }
.action-select.set-notus { background: #ffe0e0; border-color: #ff2d2d; color: #b00; }
.action-select.set-dev { background: #e0f7ff; border-color: var(--cyan); color: #006b8a; }
.action-select.set-prod { background: #fff4d6; border-color: var(--orange); color: #a85a00; }
.action-select.set-leave { background: #eee; border-color: #999; color: #555; }
.note-input { width: 100%; min-width: 120px; }

/* ---------- webring footer ---------- */
.webring {
  margin: 10px 22px 30px; padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(230,250,255,.92));
  border: 4px ridge var(--purple); border-radius: 10px; text-align: center;
}
.webring-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.fkbtn {
  background: linear-gradient(180deg, #fff, #d6fbff); border: 3px outset var(--cyan);
  padding: 4px 12px; border-radius: 6px; font-weight: bold; color: var(--purple); font-size: 13px; cursor: pointer;
}
.fkbtn:active { border-style: inset; }
.footer-stamps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.stamp {
  font-family: "Courier New", monospace; font-size: 11px; font-weight: bold;
  padding: 3px 8px; border: 2px outset #aaa; border-radius: 3px; background: #ddd; color: #222;
}
.stamp.ie { background: #0a246a; color: #fff; border-color: #6b8fd6; }
.stamp.ns { background: #00853f; color: #fff; border-color: #6bd6a0; }
.stamp.html { background: #ff6600; color: #fff; border-color: #ffb380; }
.copyright { font-size: 12px; color: var(--purple); font-weight: bold; }

/* ---------- 👑 Dinh easter eggs ---------- */
.avatar-dinh {
  background: linear-gradient(180deg, var(--yellow), var(--orange)) !important;
  box-shadow: 0 0 0 1px var(--ink), 0 0 8px var(--yellow) !important;
}
@keyframes dinhglow { 50% { box-shadow: 0 0 12px var(--orange); } }

.dinh-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  background: linear-gradient(90deg, var(--orange), var(--yellow), #fffec2, var(--yellow), var(--orange));
  background-size: 200% 100%; animation: rainbow 3s linear infinite;
  border-bottom: 4px ridge #fff; box-shadow: 0 4px 24px rgba(0,0,0,.5);
  transform: translateY(-100%); animation: dinhdrop .5s cubic-bezier(.2,1.4,.5,1) forwards, rainbow 3s linear infinite;
}
@keyframes dinhdrop { to { transform: translateY(0); } }
.dinh-banner-inner {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  padding: 12px 18px; flex-wrap: wrap;
}
.dinh-crown { font-size: 40px; animation: spin 3s linear infinite; }
.dinh-title { font-size: 20px; font-weight: bold; color: var(--ink); text-shadow: 1px 1px 0 #fff; letter-spacing: 1px; }
.dinh-sub { font-size: 13px; font-weight: bold; color: #7a2d00; }

/* ---------- empty + toast + confetti ---------- */
.empty { text-align: center; color: #fff; padding: 50px; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 2px #000; }
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(180deg, #fffec2, var(--yellow));
  border: 4px ridge var(--orange); color: var(--ink); font-weight: bold;
  padding: 12px 22px; border-radius: 10px; font-size: 15px; opacity: 0; transition: .25s; z-index: 60;
  box-shadow: 0 0 20px var(--orange);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 55; }

/* ---------- 🎊 milestone flash banner ---------- */
.flash-banner {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) scale(.7);
  z-index: 65; padding: 14px 30px; border-radius: 14px;
  font-size: 22px; font-weight: bold; color: var(--ink); white-space: nowrap;
  background: linear-gradient(90deg, var(--hot-pink), var(--yellow), var(--cyan), var(--lime), var(--hot-pink));
  background-size: 200% 100%; animation: rainbow 3s linear infinite, flashpop .5s cubic-bezier(.2,1.5,.4,1) forwards;
  border: 5px ridge #fff; box-shadow: 0 8px 30px rgba(0,0,0,.5); text-shadow: 1px 1px 0 #fff;
}
@keyframes flashpop { to { transform: translateX(-50%) scale(1); } }
.flash-banner.out { opacity: 0; transition: opacity .5s; }

/* ---------- 🏅 completion finale certificate ---------- */
.finale {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(20,0,40,.8); backdrop-filter: blur(4px);
}
.cert {
  width: min(560px, 92vw); text-align: center; padding: 36px 32px;
  background:
    repeating-linear-gradient(45deg, #fffdf0 0 18px, #fff6d6 18px 36px);
  border: 10px double var(--orange); border-radius: 12px;
  box-shadow: 0 0 0 5px var(--yellow), 0 0 60px var(--purple);
  animation: wobble .55s ease both;
}
.cert-seal { font-size: 60px; animation: bob 2.2s ease-in-out infinite; }
.cert-eyebrow { color: var(--hot-pink); font-weight: bold; letter-spacing: 1px; margin-top: 6px; }
.cert-title {
  margin: 6px 0 12px; font-size: 38px; letter-spacing: 2px;
  background: linear-gradient(90deg, var(--hot-pink), var(--orange), var(--purple), var(--hot-pink));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: rainbow 6s linear infinite;
}
.cert-body { color: var(--ink); font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.cert-sig { display: flex; justify-content: space-around; font-size: 13px; color: var(--purple); margin-bottom: 20px; }
.cert-sig strong { color: var(--hot-pink); }

/* ---------- ★ achievement toast ---------- */
.ach-toast {
  position: fixed; top: 80px; right: -360px; z-index: 75; width: 320px;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: linear-gradient(135deg, #1a0033, #3a0a5e);
  border: 3px ridge var(--yellow); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6); transition: right .4s cubic-bezier(.2,1.3,.4,1);
}
.ach-toast.show { right: 22px; }
.ach-emoji { font-size: 38px; filter: drop-shadow(0 0 6px var(--yellow)); }
.ach-unlocked { font-size: 10px; font-weight: bold; letter-spacing: 1px; color: var(--yellow); }
.ach-name { font-size: 17px; font-weight: bold; color: #fff; }
.ach-desc { font-size: 12px; color: var(--cyan); }

/* ---------- 👑 Dinh approval pill ---------- */
.dinh-approval { color: var(--yellow) !important; font-weight: bold; }

/* ---------- 👑 ?dinh splash ---------- */
.dinh-splash {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(20,0,40,.82); backdrop-filter: blur(5px);
}
.dinh-splash-card {
  width: min(480px, 92vw); text-align: center; padding: 32px;
  background: repeating-linear-gradient(45deg, #fff0fb 0 14px, #ffe3f7 14px 28px);
  border: 6px ridge var(--orange); border-radius: 16px;
  box-shadow: 0 0 0 4px var(--yellow), 0 0 50px var(--purple); animation: wobble .5s ease both;
}
.dinh-splash-crown { font-size: 64px; animation: spin 4s linear infinite; }
.dinh-splash-card h2 { color: var(--purple); letter-spacing: 4px; margin: 8px 0; }
.dinh-splash-card p { color: #b3007a; font-weight: bold; font-size: 14px; }
.dinh-splash-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ---------- 👁️ observer (read-only) mode ---------- */
body.observer-mode .whoami { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,229,255,.5); }
body.observer-mode .whoami strong { color: var(--cyan); }
/* a little "OBSERVER MODE" ribbon banner under the marquee */
body.observer-mode .status98::after {
  content: '👁️ OBSERVER MODE — read only';
  color: var(--cyan); font-weight: bold; margin-left: 8px;
}
/* disabled controls read as clearly-inert rather than broken */
body.observer-mode .btn-dibs[disabled],
body.observer-mode .action-select[disabled],
body.observer-mode .note-input[disabled] { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }

/* ---------- 🥚 easter-egg guide (observer-only) ---------- */
#eggGuideBtn { display: none; }                     /* hidden for dibsers */
body.observer-mode #eggGuideBtn {
  display: inline-block;
  background: linear-gradient(180deg, #fffec2, var(--yellow)); border-color: var(--orange);
  animation: throb 1.8s ease-in-out infinite;
}
.egg-guide {
  position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center;
  background: rgba(20,0,40,.82); backdrop-filter: blur(5px);
}
.egg-card {
  width: min(680px, 94vw); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, #fff, var(--panel-2));
  border: 6px ridge var(--purple); border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 0 0 4px var(--yellow), 0 0 50px var(--purple); animation: wobble .5s ease both;
}
.egg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 22px; font-weight: bold; color: var(--purple); margin-bottom: 2px;
}
.egg-sub { color: var(--hot-pink); font-weight: bold; font-size: 13px; margin-bottom: 14px; }
.egg-group {
  margin: 16px 0 6px; font-size: 14px; font-weight: bold; color: var(--ink);
  border-bottom: 2px dashed var(--cyan); padding-bottom: 4px;
}
.egg-group:first-child { margin-top: 0; }
.egg-row { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; }
.egg-trigger {
  flex: 0 0 200px; font-family: "Courier New", monospace; font-size: 12px; font-weight: bold;
  background: var(--ink); color: var(--lime); padding: 3px 8px; border-radius: 5px;
  border: 2px outset #444; white-space: normal; word-break: break-word;
}
.egg-detail { flex: 1; font-size: 13px; color: var(--ink); }
.egg-name { font-weight: bold; color: var(--hot-pink); }
.egg-what { color: #5a3a6b; }

/* ---------- 🌙 night mode ---------- */
body.night {
  background-color: #05010f;
  background-blend-mode: luminosity;
}
body.night .app-header { background: linear-gradient(180deg, rgba(20,8,40,.95), rgba(30,12,55,.95)); }
body.night .app-header h1, body.night .subtitle { color: #c9b6ff; }
body.night .grid tbody tr { background: linear-gradient(180deg, #1a0f33, #120a26); border-color: var(--purple); }
body.night .grid tbody tr:nth-child(even) { background: linear-gradient(180deg, #1d1238, #14092b); }
body.night .dash-title, body.night .lb-cnt { color: #ece3ff; }
body.night .stat, body.night .leaderboard { background: linear-gradient(180deg, #1a0f33, #120a26); color: #ece3ff; }
body.night .stat .num { color: #c9b6ff; }
body.night .search, body.night .action-select, body.night .note-input { background: #1a0f33; color: #ece3ff; }
body.night .chip { background: linear-gradient(180deg, #241544, #1a0f33); color: #c9b6ff; }
body.night .controls .search::placeholder { color: #8a7bb5; }

/* ---------- 🪩 disco fever ---------- */
body.disco { animation: disco-bg .35s steps(1) infinite; }
@keyframes disco-bg {
  0% { background-color: #ff003c; }
  20% { background-color: #ff8a00; }
  40% { background-color: #ffea00; }
  60% { background-color: #00d4ff; }
  80% { background-color: #b300ff; }
  100% { background-color: #00ff85; }
}
body.disco .grid tbody tr, body.disco .stat, body.disco .leaderboard { animation: disco-tilt .4s ease-in-out infinite alternate; }
@keyframes disco-tilt { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .grid thead { display: none; }
  .grid, .grid tbody, .grid tr, .grid td { display: block; width: 100%; }
  .grid tbody tr { margin-bottom: 12px; padding: 4px; border-radius: 10px; }
  .grid tbody td { border: none !important; padding: 7px 12px; }
  .leaderboard { max-width: 100%; }
  .best-viewed { margin-left: 0; }
}