/* ============ 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(233, 27, 96, 0.199);
  --r1-panel-bg-bot: rgba(235, 209, 96, 0.35);
  --r1-panel-border: rgba(243, 84, 10, 0.363);
  --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(255, 0, 0, 0.87);
  --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(212, 186, 35, 0.719);
  --r1-card-hover-border: rgba(42, 28, 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(15, 86, 238, 0.85);
  --r1-neon-gold: rgb(255, 228, 170);

  /* 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/l3.jpg"); /* 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(247, 231, 141, 0.911),
    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;
} 
/* Az alap kártya stílusa */
.character_card {
  background: rgba(255, 255, 255, 0.1) !important; /* Áttetsző háttér */
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  height: 280px !important; /* Elég magas, hogy elférjen az alak */
  width: 180px;
  position: relative !important;
  overflow: visible !important; /* HOGY KI TUDJON LÓGNI A FEJE */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 15px !important;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* A karakter (Rikó/Lili) elhelyezése */
.card_character {
  position: absolute;
  top: -40px; /* FELTOLJUK A KÁRTYA SZÉLE FÖLÉ */
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 200px;
  z-index: 2;
  pointer-events: none;
}

.card_character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* ÁRNYÉK: ettől lesz mélysége a karakternek */
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.6)); 
}

/* A szöveg stílusa a kártya alján */
.card_content {
  background: rgba(0, 0, 0, 0.5); /* Sötétebb alap a szövegnek */
  backdrop-filter: blur(5px); /* Üveghatás */
  border-radius: 12px;
  padding: 10px;
  width: 100%;
  z-index: 3;
}

/* Animáció, ha rávisszük az egeret */
.character_card:hover {
  transform: translateY(-10px);
  border-color: #00f2ff !important; /* Neon fény az élének */
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
}
/* ===== SCORE PANEL (R3 KLÓN – LILI SZÍN) ===== */
.score_panel{
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;

  background: rgba(253, 226, 166, 0.4);   /* LILI */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(253, 5, 199, 0.73); /* LILI */
  border-radius: 20px;
  padding: 15px;
  color: rgb(4, 0, 245);

  z-index: 2000; /* biztosan a panel fölött marad */
}

.current_player_status{
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-weight: bold;
}

.top_list h3{
  font-size: 16px;
  color: #0330f8;  /* LILI */
  margin-bottom: 10px;
  text-align: center;
}

#highscore_list{
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.mw_modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85); /* Sötétített háttér, hogy kiemelje a kártyát */
  z-index: 10000;
  backdrop-filter: blur(8px);
}

.mw_modal_card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 3px solid #ffd900; /* Neon keret */
  border-radius: 30px;
  padding: 40px;
  text-align: center;
  color: white;
  box-shadow: 0 0 50px rgba(255, 196, 0, 0.4);
}

.modal_hero img {
  filter: drop-shadow(0 0 15px #33ff00);
  margin-bottom: 20px;
}
/* r2.css - A FŐOLDALI GOMBOK EGYSÉGESÍTÉSE */
.card {
    background: rgba(255, 255, 255, 0.05); /* Nagyon halvány háttér */
    border: 2px solid rgb(255, 153, 0); /* Vékony alapkeret */
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.card:hover {
    border-color: #ff000d;
    box-shadow: 0 0 20px rgba(255, 238, 0, 0.5); /* Neon ragyogás */
    transform: translateY(-5px);
}

/* Az ikonok mérete és helye - NE legyen benne plusz háttér vagy keret */
.card_icon {
    font-size: 45px !important; /* Nagyobb ikon */
    background: transparent !important; /* Törli a sötét hátteret az ikon mögül */
    border: none !important; /* Törli az extra keretet az ikon körül */
    min-width: 60px;
    display: flex;
    justify-content: center;
}

/* A felirat neonosítása */
.card_title {
    font-size: 20px;
    font-weight: bold;
    color: #00ff22;
    text-shadow: 0 0 10px #00f2ff; /* Neon fény a szövegnek */
}
/* ELTÁVOLÍTUNK MINDEN FEKETE KOCKÁT A SZÖVEG MÖGÜL */
.card_content, .card_title, .card_subtitle {
    background: transparent !important; /* Teljesen átlátszó háttér */
    border: none !important;            /* Semmi keret a szöveg körül */
    box-shadow: none !important;        /* Semmi árnyék a szöveg dobozán */
}

/* Ha azt szeretnéd, hogy mindegyiknek szép neon fénye legyen */
.card_title {
    color: #2f00ff !important;
    text-shadow: 0 0 10px #00f2ff, 0 0 20px #00f2ff !important;
    font-weight: bold;
}
/* ===== YT BUBBLE CHOICES (GLOBAL PER-PAGE CSS) ===== */
:root{
  /* Alapok – oldalanként felülírható */
  --yt_choice_bg: rgba(255,255,255,0.12);
  --yt_choice_border: rgba(255,255,255,0.22);
  --yt_choice_text: #fff;

  --yt_choice_active_bg: rgba(255,255,255,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_title{
  font-weight: 800;
  font-size: 14px;
  opacity: 0.95;
}

#yt_bubble .yt_choice_btn{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  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;
}

#yt_bubble .yt_choice_btn.is_active{
  background: var(--yt_choice_active_bg);
  border-color: var(--yt_choice_active_border);
}