:root{
  --bg: #0c0f14;
  --card: #131822;
  --ink: #e9eef7;
  --muted: #9fb0c6;
  --accent: #f2c572;
  --support: #2e63ff;
  --support-ink: #ffffff;
  --ribbon-clear: clamp(32px, 7vw, 96px);

  /* animációk */
  --ease-slow: cubic-bezier(.22,.61,.36,1);
  --ease-very: cubic-bezier(.16,.84,.24,1);
  --dur-bubble: 2.40s;
  --dur-label:  2.00s;
  --delay-label: .35s;

  /* buborék távolsága a szélektől (viewport) */
  --fab-offset: clamp(14px, 2.8vw, 28px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 97.4%;
  margin: 0;
  background: radial-gradient(1000px 700px at 70% 10%, #121826, #0b0e13 55%, #080a0f);
  color: var(--ink);
  font: 500 16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}

.wrap{
  max-width: 900px;
  margin: 5vh auto 8vh;
  padding: 0 clamp(16px, 3.2vw, 30px);
  text-align: center;
}

.brand{
  margin: 0 0 6px;
  font-size: clamp(24px, 4.2vw, 40px);
  letter-spacing: .5px;
  display: inline-flex;
  gap: .45rem;
  align-items: center;
}
.brand span { filter: drop-shadow(0 2px 8px rgba(242,197,114,.4)); }

/* KÁRTYA */
.card{
  position: relative;
  margin: var(--ribbon-clear) auto 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #121725, #0f1320);
  box-shadow:
    0 16px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.06);
  padding: clamp(10px, 2vw, 16px);
}

/* canvas */
#hourglass {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  image-rendering: optimizeQuality;
}

/* szalag */
.ribbon{
  position: absolute;
  top: 16px; right: -46px;
  background: #c93;
  color: #231;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 8px 80px;
  transform: rotate(30deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  border-radius: 4px;
  text-transform: uppercase;
  opacity: .9;
}

/* LÁBLÉC: copyright mindig középen */
.footer-row{
  margin-top: 12px;
  text-align: center;   /* <<< középre */
}
.hint{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  opacity: .9;
}

/* SUPPORT BUBORÉK – fixen a jobb alsó sarokban */
.support-bubble{
  --size: 44px;

  position: fixed;                     /* <<< mindig a viewporthoz igazodik */
  right: var(--fab-offset);
  bottom: var(--fab-offset);
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: var(--size);
  min-width: var(--size);
  padding: 0 12px 0 10px;
  border-radius: var(--size);

  background: radial-gradient(120% 120% at 30% 20%, #5182ff, var(--support));
  color: var(--support-ink);
  text-decoration: none;
  font-weight: 700;

  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  will-change: min-width, padding, transform, filter;

  transition:
    min-width var(--dur-bubble) var(--ease-very),
    padding   var(--dur-bubble) var(--ease-very),
    transform .50s var(--ease-very),
    filter    .50s var(--ease-very);
}

.support-bubble svg{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.support-bubble .label{
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition:
    max-width var(--dur-label) var(--ease-slow) var(--delay-label),
    opacity   var(--dur-label) linear           var(--delay-label);
}
.support-bubble:hover,
.support-bubble:focus-visible{
  min-width: 190px;
  padding-right: 16px;
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.support-bubble:hover .label,
.support-bubble:focus-visible .label{
  max-width: 150px;
  opacity: 1;
}

/* fókusz */
.support-bubble:focus-visible{
  outline: 3px solid rgba(81,130,255,.6);
  outline-offset: 2px;
}

/* mobil: mindig kinyitva a címke */
@media (hover: none){
  .support-bubble{ min-width: 190px; }
  .support-bubble .label{ max-width: 150px; opacity: 1; }
}

/* kis eszközök */
@media (max-width: 520px){
  .ribbon{
    display: block;
    top: 8px;
    right: -28px;
    padding: 2px 16px;
    font-size: .8rem;
    transform: rotate(26deg);
  }
  .card{ margin: clamp(28px, 8vw, 56px) auto 10px; }
}

/* csökkentett mozgás */
@media (prefers-reduced-motion: reduce){
  .support-bubble,
  .support-bubble .label{ transition: none; }
}