/* ============ R1 (RIKÓ) – PAGE CSS ============ */
/* Cél: 2 fájlból építkezés (r1.html + r1.css), a skin marad tiszta token-fájl. */

/* =========================================================
   R1 PAGE TUNING (CSAK ITT ÁLLÍTS SZÍNEKET)
   - háttérkép
   - panel/kártya üveg + neon
   - gamer „aqua/gold” hangulat
   ========================================================= */
:root{
  /* Panel */
  --r1-panel-bg-top: rgba(65, 27, 233, 0.199);
  --r1-panel-bg-bot: rgba(0,0,0,0.35);
  --r1-panel-border: rgba(9, 198, 255, 0.281);
  --r1-panel-shadow: 0 24px 70px rgba(0,0,0,0.45);

  /* CARD – EZ A LÉNYEG: R1 “eredeti” kékes/lilás doboz */
  --r1-card-bg: rgba(60, 110, 235, 0.301);
  --r1-card-border: rgba(170, 200, 255, 0.55);
  --r1-card-shadow: 0 10px 26px rgba(0,0,0,0.28);

  /* HOVER – erősebb, “fényesebb” */
  --r1-card-hover-bg: rgba(79, 8, 243, 0.55);
  --r1-card-hover-border: rgba(28, 192, 241, 0.75);
  --r1-card-hover-shadow: 0 14px 34px rgba(0,0,0,0.30), 0 0 28px rgba(120,190,255,0.22);

  /* (Ezeket hagyhatod, nem baj ha ott vannak) */
  --r1-neon-aqua: rgba(120,190,255,0.85);
  --r1-neon-gold: rgba(255,228,170,0.35);

  /* YT buborék */
  --yt-bg: rgba(0,0,0,0.55);
  --yt-border: rgba(255,80,80,0.85);
  --yt-glow1: rgba(255,80,80,0.65);
  --yt-glow2: rgba(255,80,80,0.28);
}

/* ============ R1_BACKGROUND ============ */
.bg{
  position: fixed;
  inset: 0;
  background-image: url("../galeri/background/riko3_1.webp"); /* HÁTTÉRKÉP */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 65%;
  z-index: -1;
}

/* ============ R1_PANEL (layout) ============ */
.panel_wrap{
  position: fixed;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 120px));

  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 14px 14px 12px;

  /* tokenes „premium glass” */
  background: linear-gradient(180deg, var(--r1-panel-bg-top), var(--r1-panel-bg-bot));
  border: 3px solid var(--r1-panel-border);
  box-shadow: var(--r1-panel-shadow);
}

.panel_head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
  color:#fff;
  font-weight: 700;
  font-size: 14px;
}

.panel_hint{
  font-weight: 600;
  opacity: 0.85;
  font-size: 12px;
  text-align: right;
}

/* ============ R1_CARDS_GRID ============ */
.cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 900px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .panel_wrap{ width: min(760px, calc(100% - 110px)); }
}

@media (max-width: 520px){
  .cards{ grid-template-columns: 1fr; }
  .panel_wrap{ width: calc(100% - 96px); }
}

/* ============ R1_CARD_BASE (gamer, tokenes) ============ */
.card{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  min-height: 56px;

  border-radius: 14px;
  border: 2px solid var(--r1-card-border);
  background: var(--r1-card-bg);
  color:#fff;
  cursor: pointer;
  user-select: none;

  box-shadow: var(--r1-card-shadow);
  overflow: hidden;
  transform: translateZ(0);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    border-color .12s ease;
}

/* Neon edge – csak hoverkor erősödik */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 16px;
  padding: 2px;

  background: linear-gradient(
    135deg,
    rgba(110,255,238,0.0),
    rgba(110,255,238,0.45),
    rgba(255,228,170,0.28),
    rgba(110,255,238,0.0)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  opacity: 0.35;
  pointer-events:none;
  transition: opacity .18s ease;
}

/* Shimmer csík – CSAK hoverkor fut (1x) */
.card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 70%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(110,255,238,0.18), rgba(255,228,170,0.10), transparent);
  transform: rotate(18deg) translateX(-30%);
  opacity: 0;
  pointer-events:none;
}

.card:hover{
  background: var(--r1-card-hover-bg);
  border-color: var(--r1-card-hover-border);
  transform: translateY(-2px);
  box-shadow: var(--r1-card-hover-shadow);
}

.card:hover::before{ opacity: 0.70; }

.card:hover::after{
  opacity: 1;
  animation: kkShimmer .55s ease-out 1;
}

@keyframes kkShimmer{
  from{ transform: rotate(18deg) translateX(-60%); }
  to{ transform: rotate(18deg) translateX(220%); }
}

.card:active{
  transform: translateY(0px) scale(0.995);
}
.card:active::before{ opacity: 0.95; }

/* ============ CARD_CONTENT ============ */
.card_icon{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.16);

  box-shadow:
    0 0 10px rgba(110,255,238,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.05);

  overflow: hidden;
  flex: 0 0 auto;
}

.card:hover .card_icon{
  border-color: rgba(110,255,238,0.28);
  box-shadow:
    0 0 14px rgba(110,255,238,0.16),
    0 0 18px rgba(255,228,170,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Icon itself (SVG as mask) – FAST */
.kk_icon{
  display:block;
  width: 26px;
  height: 26px;
  margin: 9px auto;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95), rgba(110,255,238,0.85) 55%, rgba(255,228,170,0.55));
  filter: drop-shadow(0 0 6px rgba(110,255,238,0.16));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
  transition: transform .16s ease, filter .16s ease;
}

.card:hover .kk_icon{
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(110,255,238,0.22));
}

/* Minimal „spark” pontok a badge-ben – csak hoverkor villan (1x) */
.card_icon::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,228,170,0.65) 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 30%, rgba(110,255,238,0.70) 0 1.2px, transparent 2px),
    radial-gradient(circle at 58% 78%, rgba(255,255,255,0.55) 0 1.2px, transparent 2px);
  opacity: 0;
  pointer-events:none;
}

.card:hover .card_icon::after{
  opacity: 1;
  animation: kkSpark .45s ease-out 1;
}
@keyframes kkSpark{
  from{ opacity: 0; transform: scale(0.92); }
  to{ opacity: 1; transform: scale(1.00); }
}

/* Titles */
.card_title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.2px;
  text-shadow: 0 0 10px rgba(110, 144, 255, 0.1);
}

.card_sub{
  margin: 0;
  opacity: 0.88;
  font-size: 12px;
  font-weight: 600;
}

/* ============ R1_STACKING ============ */
html, body{ background: transparent !important; }
.bg{ z-index: -1 !important; }

.corner_btn,
.panel_wrap,
.corner_youtube{
  z-index: 2000 !important;
}

/* ============ R1 – YT BUBBLE (FIX: NO FULL OVERLAY) ============ */
.yt_bubble{
  position: fixed;
  top: 76px;     /* a piros play gomb alá */
  right: 16px;
  z-index: 5000;
  background: none;
  backdrop-filter: none;
  pointer-events: none; /* háttér mindig kattintható */
}

.yt_bubble_card{
  pointer-events: auto;
  width: 240px;
  border-radius: 18px;
  padding: 14px 14px 12px;

  background: var(--yt-bg);
  border: 2px solid var(--yt-border);
  box-shadow: 0 0 10px var(--yt-glow1), 0 0 18px var(--yt-glow2);

  color:#fff;
  cursor: pointer;
  position: relative;
  animation: ytPop .18s ease-out;
}

@keyframes ytPop{
  from{ transform: translateY(-8px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.yt_close{
  position:absolute;
  right: 10px;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color:#fff;
  cursor: pointer;
}

.yt_title{ font-weight: 900; font-size: 14px; margin-bottom: 6px; }
.yt_hint{ font-weight: 650; font-size: 12px; opacity: .9; }

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .kk_icon{ transition: none !important; }
  .card:hover::after{ animation: none !important; }
  .card:hover .card_icon::after{ animation: none !important; }
}

.yt_bubble{
  inset: auto !important;
  right: 18px !important;
  top: 72px !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 5000 !important;
}

/* ===== YT BUBBLE CHOICES (R1) =====
   Einheitliches Skin pro Seite.
   Farben kannst du später pro Seite über :root Variablen anpassen.
*/
:root{
  --yt_choice_bg: rgba(247, 146, 146, 0.288);
  --yt_choice_border: rgba(255,255,255,0.22);
  --yt_choice_text: #fff;

  --yt_choice_active_bg: rgba(86, 33, 184, 0.22);
  --yt_choice_active_border: rgba(255,255,255,0.38);
}

#yt_bubble .yt_choices{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

#yt_bubble .yt_choice_btn{
  width: 100%;
  padding: 10px 0;
  border-radius: 14px;

  background: var(--yt_choice_bg);
  border: 1px solid var(--yt_choice_border);
  color: var(--yt_choice_text);

  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}

#yt_bubble .yt_choice_btn:hover{
  transform: scale(1.02);
  opacity: 0.98;
}

/* youtube-mini.js setzt die aktive Auswahl auf .is_active */
#yt_bubble .yt_choice_btn.is_active{
  background: var(--yt_choice_active_bg);
  border-color: var(--yt_choice_active_border);
}

.ui-narration-wrap{
  display:flex;
  align-items:center;
  gap:15px;
}

#global-heart{
  width:44px;
  height:44px;
}