/* DirtPing kinézet: narancs fő szín, grafit sávok, homok kiemelés + a bejelentő ablak. */
:root {
  --primary: #e8600f;
  --accent: #f26b1d;
  --accent-text: #fff;
  --bar: #1b1f24;
  --bar-2: #252a31;
}
@media (prefers-color-scheme: dark) {
  :root { --primary: #ff8a3d; }
}

/* fejléc: a logó (a szerver cseréli a HTML-ben) */
.appbar .brand img.dp-wordmark { height: 30px; width: auto; display: block; }
h1 img.dp-icon { border-radius: 9px; }

/* ---- bejelentés ---- */
.dp-announce {
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(27, 31, 36, .78), rgba(10, 12, 15, .92));
  animation: dp-fade .35s ease-out;
}
.dp-announce.dp-out { animation: dp-fade-out .35s ease-in forwards; }
.dp-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; }
.dp-card {
  position: relative; z-index: 1; max-width: 460px; width: 100%;
  background: #fffaf3; color: #1b1f24; border-radius: 22px; padding: 26px 24px 22px; text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), 0 0 0 3px rgba(242, 107, 29, .5);
  animation: dp-pop .7s cubic-bezier(.2, 1.4, .4, 1) .15s both;
}
.dp-logo { width: min(300px, 80%); height: auto; display: block; margin: 0 auto 10px; animation: dp-wiggle 2.4s ease-in-out .9s infinite; }
.dp-card h2 { margin: .2rem 0 .5rem; font-size: 1.55rem; line-height: 1.2; }
.dp-card h2 span { color: #f26b1d; }
.dp-card p { margin: .4rem 0; color: #3b4048; line-height: 1.45; }
.dp-small { font-size: .85rem; color: #6b7078 !important; }
.dp-domains { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 6px; }
.dp-domains a {
  padding: .45rem .8rem; border-radius: 999px; background: #1b1f24; color: #f4e9da; font-weight: 700;
  text-decoration: none; font-size: .95rem; animation: dp-pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.dp-domains a:nth-child(1) { animation-delay: .7s; }
.dp-domains a:nth-child(2) { animation-delay: .85s; }
.dp-domains a:nth-child(3) { animation-delay: 1s; }
.dp-domains a:hover { background: #f26b1d; color: #fff; }
.dp-go {
  margin-top: 14px; width: 100%; padding: .85rem 1rem; border: 0; border-radius: 14px; cursor: pointer;
  background: #f26b1d; color: #fff; font-size: 1.1rem; font-weight: 800; box-shadow: 0 6px 18px rgba(242, 107, 29, .45);
}
.dp-go:hover { background: #e05a0c; }
.dp-replay {
  position: fixed; left: 12px; bottom: 12px; z-index: 99998; padding: .5rem .8rem; border-radius: 999px;
  border: 0; background: #f26b1d; color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); cursor: pointer;
}
/* Like gomb */
.dp-like { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1.2rem; }
.dp-like .dp-thumb { display: inline-block; font-size: 1.5rem; transition: transform .2s; }
.dp-like:hover .dp-thumb { transform: rotate(-12deg) scale(1.15); }
.dp-like.dp-liked { background: #1b1f24; }
.dp-like.dp-bump .dp-thumb { animation: dp-bump .6s cubic-bezier(.2, 1.6, .4, 1); }
.dp-likes { margin-top: 8px; font-size: .9rem; color: #6b7078; }
.dp-fly { position: fixed; z-index: 2; font-size: 1.6rem; pointer-events: none; animation: dp-fly 1.4s ease-out forwards; }
@keyframes dp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.8) rotate(-15deg); } 100% { transform: scale(1); } }
@keyframes dp-fly { from { opacity: 1; transform: translate(-50%, 0) scale(.6); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), -260px) scale(1.3); } }
@keyframes dp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dp-fade-out { to { opacity: 0; } }
@keyframes dp-pop { from { opacity: 0; transform: scale(.6) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes dp-wiggle { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-3deg); } 16% { transform: rotate(3deg); } 24% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .dp-logo, .dp-card, .dp-domains a { animation: none; }
}