/* ============================================================
   REBOOT — reboot.css  · Mobile-first · Vibrant · No dark
   ============================================================ */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { font-family: "DM Sans", sans-serif; color: #1A1A2E; background: #F8F5FF; min-height: 100dvh; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* UTILITY */
._OFF_    { display: none !important; }
._ONN_    { display: block !important; }
.dispHide { display: none !important; }
.no-selec { user-select: none; -webkit-user-select: none; }

/* TOKENS */
:root {
  --red:#FF3D5A;       --red-lt:#FFE5EA;    --red-dk:#D4002E;
  --orange:#FF6B35;
  --purple:#7B2FBE;    --purple-lt:#F0E8FF;
  --teal:#00C8A0;      --teal-lt:#E0FFF8;   --teal-dk:#009E7E;
  --yellow:#FFD500;    --yellow-dk:#C9A800;
  --blue:#0090FF;      --blue-lt:#E3F3FF;
  --ink:#1A1A2E;       --ink2:#3D3D5C;      --ink3:#7070A0;
  --white:#FFFFFF;     --bg:#F8F5FF;
  --font-title:"Plus Jakarta Sans", sans-serif;
  --border:rgba(122,47,190,0.12);
  --sh-sm:0 2px 8px rgba(26,26,46,.08);
  --sh-md:0 8px 24px rgba(26,26,46,.12);
  --sh-lg:0 16px 48px rgba(26,26,46,.18);
  --r-md:14px; --r-lg:20px; --r-xl:32px; --r-full:9999px;
  --char-media-vert: 3/4;
}

/* ── CONTENT CONTAINER ── */
#content {
  position: relative;
  width: 100% !important;
  max-width: 480px !important;
  min-height: 100dvh;
  height: auto !important;
  margin: 0 auto;
  background: var(--bg);
  overflow-x: hidden;
  display: block !important;
}
.content_ { width:100%!important; max-width:480px!important; height:auto!important; min-height:100dvh; }

.page {
  position: relative; width: 100%; min-height: 100dvh;
  background: var(--bg);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.page-enter-de { transform: translateX(100%); }
.page-enter-iz { transform: translateX(-100%); }

/* ── LOGO ── */
.rbt-logo-svg { display:block; width:100%; height:100%; }
.rbt-logo-svg path { fill: var(--ink); }
.rbt-logo--white .rbt-logo-svg path { fill: #FFFFFF; }
.rbt-logo { display:inline-flex; align-items:center; line-height:0; flex-shrink:0; }
.rbt-logo--splash { display:block; height:52px; width:248px; }
.rbt-logo--header { display:block; height:20px; width:95px; }
.rbt-logo--hud    { display:block; height:16px; width:76px; }

/* ── LOADING ── */
#top_loading {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(248,245,255,.95);
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--ink2);
}
#top_loading[style*="display: block"],
#top_loading[style*="display:block"] { display:flex!important; }
#top_loading._anima_ { display:flex!important; animation: loadPulse 2s ease-in-out infinite; }
@keyframes loadPulse { 0%,100%{opacity:.75} 50%{opacity:1} }
#top_loading::before {
  content:""; display:block; width:44px; height:44px;
  border:3px solid var(--border); border-top-color:var(--red);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── HEADER ── */
.rbt-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; max-width: 480px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 14px; height: 58px;
  background: var(--white); border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.rbt-header-logo    { flex:1; display:flex; justify-content:center; align-items:center; overflow:hidden; }
.rbt-header-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }

/* ── ICON BUTTONS ── */
.rbt-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  color:var(--ink); cursor:pointer; flex-shrink:0;
  transition:background .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.rbt-icon-btn svg      { width:22px; height:22px; display:block; }
.rbt-icon-btn:hover    { background:rgba(122,47,190,.08); }
.rbt-icon-btn:active   { transform:scale(.92); }
.rbt-icon-btn--sm      { width:34px; height:34px; }
.rbt-icon-btn--sm svg  { width:17px; height:17px; }

/* ── SCREEN / MAIN ── */
.rbt-screen { display:flex; flex-direction:column; min-height:100dvh; }
.rbt-main   { flex:1; padding:16px; padding-bottom:40px; }
.rbt-main--char   { padding-bottom:100px; }
.rbt-main--access { text-align:center; padding-top:24px; }
.rbt-main--level  { padding:0; }
.rbt-section-label {
  font-family:var(--font-title); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink3); margin:14px 0 10px;
}
.rbt-footer-text { font-size:13px; color:var(--ink3); line-height:1.6; padding:32px 16px 24px; text-align:center; }

/* ── BUTTONS ── */
.rbt-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:var(--r-full);
  font-family:var(--font-title); font-size:15px; font-weight:700;
  cursor:pointer; white-space:nowrap; border:none;
  transition:transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color:transparent;
}
.rbt-btn svg    { width:18px; height:18px; flex-shrink:0; }
.rbt-btn:active { transform:scale(.96); }
.rbt-btn--full  { width:100%; }
.rbt-btn--primary { background:var(--purple); color:#fff; box-shadow:0 4px 16px rgba(123,47,190,.35); }
.rbt-btn--hero    { background:linear-gradient(135deg,var(--red),var(--orange)); color:#fff; font-size:17px; padding:16px 32px; box-shadow:0 6px 24px rgba(255,61,90,.4); }
.rbt-btn--outline { background:transparent; color:var(--purple); border:2px solid var(--purple); }
.rbt-btn--ghost   { background:transparent; color:var(--ink2); border:1.5px solid var(--border); }
.rbt-btn--danger  { background:var(--red); color:#fff; box-shadow:0 4px 14px rgba(255,61,90,.3); }

/* boton_nar = clase original JS → botón Start */
.boton_nar {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 48px; border-radius:var(--r-full);
  font-family:var(--font-title); font-size:17px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg,var(--red),var(--orange));
  color:#fff; box-shadow:0 6px 24px rgba(255,61,90,.4);
  transition:transform .12s; -webkit-tap-highlight-color:transparent;
}
.boton_nar:active { transform:scale(.96); }
.boton_nav, .boton_nav_off {
  display:flex; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:var(--r-full); width:100%;
  font-family:var(--font-title); font-size:15px; font-weight:700;
  cursor:pointer; margin-bottom:10px;
  border:2px solid var(--purple); color:var(--purple); background:transparent;
}
.boton_nav_off { opacity:.4; pointer-events:none; }

/* ── SPLASH ── */
.rbt-splash {
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative; overflow:hidden; background:var(--bg);
}
.rbt-splash-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.rbt-blob { position:absolute; border-radius:50%; filter:blur(55px); animation:blobFloat 6s ease-in-out infinite; }
.rbt-blob--1 { width:280px; height:280px; background:var(--red);    top:-60px;   right:-40px; opacity:.4; }
.rbt-blob--2 { width:240px; height:240px; background:var(--teal);   bottom:-40px;left:-50px;  opacity:.35; animation-delay:2s; }
.rbt-blob--3 { width:180px; height:180px; background:var(--yellow); bottom:20%;  right:-20px; opacity:.5;  animation-delay:4s; }
@keyframes blobFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-16px) scale(1.04)} }

.rbt-splash-content {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:28px; padding:40px 28px; text-align:center;
}
.rbt-splash-logo { animation:logoIn .8s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes logoIn { from{opacity:0;transform:scale(.7) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
.rbt-splash-tagline { font-size:16px; color:var(--ink2); max-width:280px; line-height:1.5; animation:fadeUp .6s .35s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.rbt-splash-dots { display:flex; gap:6px; position:absolute; bottom:28px; }
.rbt-splash-dots span { width:6px; height:6px; border-radius:50%; background:var(--purple); animation:dotPulse 1.4s ease-in-out infinite; }
.rbt-splash-dots span:nth-child(2) { animation-delay:.2s; }
.rbt-splash-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotPulse { 0%,80%,100%{opacity:.3;transform:scale(1)} 40%{opacity:1;transform:scale(1.4)} }

/* ── GAME CARDS ── */
.rbt-games-grid { display:flex; flex-direction:column; gap:14px; }
.rbt-game-card {
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--white); box-shadow:var(--sh-sm);
  cursor:pointer; transition:transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.rbt-game-card--active:active { transform:scale(.98); }
.rbt-game-card--closed        { opacity:.6; cursor:default; }
.rbt-game-card-cover          { height:155px; background-size:cover; background-position:center; position:relative; background-color:#C8B4FF; }
.rbt-game-card-overlay        { position:absolute; inset:0; background:linear-gradient(to top,rgba(26,26,46,.72),transparent 60%); }
.rbt-game-card-closed {
  position:absolute; top:8px; right:8px;
  display:flex; align-items:center; gap:4px;
  background:rgba(26,26,46,.85); color:#fff;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:var(--r-full);
}
.rbt-game-card-closed svg { width:11px; height:11px; }
.rbt-game-card-body  { padding:12px 14px; }
.rbt-game-card-title { font-family:var(--font-title); font-size:18px; font-weight:800; color:var(--ink); margin-bottom:4px; line-height:1.2; }
.rbt-game-card-info  { font-size:13px; color:var(--ink3); margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rbt-game-card-meta  { display:flex; gap:5px; flex-wrap:wrap; }
.rbt-badge           { display:inline-flex; align-items:center; font-size:11px; font-weight:500; padding:3px 9px; border-radius:var(--r-full); background:var(--bg); color:var(--ink2); border:1px solid var(--border); }
.rbt-badge--date     { background:var(--purple-lt); color:var(--purple); border-color:transparent; }
.rbt-badge--score    { background:#FFF9D0; color:var(--yellow-dk); border-color:transparent; }

/* ── CHARACTER ── */
.rbt-char-label {
  font-family:var(--font-title); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red); padding:14px 16px 3px;
}
.rbt-char-name { font-family:var(--font-title); font-size:28px; font-weight:800; color:var(--ink); padding:0 16px 14px; line-height:1.1; }

.cont_con_char_media        { margin-bottom:8px; }
.cont_con_char_media_marco  { height:260px; background:#EEE8FF; position:relative; overflow:hidden; }
.modM1 { margin:12px -16px 0; }
.modM2 { height:220px; }
/* 
======================
=====================
=====================
*/
.cont_con_char_media_marco--vert { height:auto; aspect-ratio:var(--char-media-vert); }


.cont_con_char_media_marco_img {
  position:absolute; inset:0; background-size:cover; background-position:center top;
}
.cont_con_char_media_marco_vid          { position:absolute; inset:0; }
.cont_con_char_media_marco_vid video    { width:100%; height:100%; object-fit:cover; }
._mediaChar_                            { transition:opacity .35s; }
._mediaChar_.page-enter-de              { opacity:0; pointer-events:none; }
.cont_con_char_media_pag                { display:flex; justify-content:center; gap:6px; padding:8px; background:var(--white); }
.cont_con_char_media_pag_op             { width:8px; height:8px; border-radius:50%; background:rgba(122,47,190,.2); cursor:pointer; transition:background .2s, transform .2s; }
.cont_con_char_media_pag_op.opPagSel   { background:var(--purple); transform:scale(1.35); }

/* ── Media en columna (variante _1) ── */
.cont_con_char_media_marco_img_1,
.cont_con_char_media_marco_vid_1 {
  position: relative;
  margin-bottom: 8px;
  background: #000000;
  overflow: hidden;
}
.cont_con_char_media_marco_img_1 img,
.cont_con_char_media_marco_vid_1 video {
  display: block;
  width: 100%;
  height: auto;
}

.cont_con_char_media_marco_img_1--vert,
.cont_con_char_media_marco_vid_1--vert { height:auto; aspect-ratio:var(--char-media-vert); }
.cont_con_char_media_marco_img_1--vert img,
.cont_con_char_media_marco_vid_1--vert video { height:100%; object-fit:cover; }


.rbt-char-section       { margin:12px 14px; padding:13px; background:var(--white); border-radius:var(--r-md); border:1px solid var(--border); }
.rbt-char-section-title { font-family:var(--font-title); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--purple); margin-bottom:5px; }
.rbt-char-section-text  { font-size:13px; color:var(--ink2); line-height:1.5; }
.rbt-play-bar           { position:sticky; bottom:0; padding:10px 14px max(14px,env(safe-area-inset-bottom)); background:linear-gradient(to top,var(--white) 60%,transparent); }

/* ── ACCESS ── */
.rbt-access-icon       { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:24px auto 20px; background:var(--purple-lt); color:var(--purple); }
.rbt-access-icon svg   { width:36px; height:36px; }
.rbt-access-icon--ok   { background:var(--teal-lt); color:var(--teal-dk); }
.rbt-access-icon--error{ background:var(--red-lt);  color:var(--red); }
.rbt-access-title      { font-family:var(--font-title); font-size:24px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.rbt-access-sub        { font-size:15px; color:var(--ink2); margin-bottom:12px; line-height:1.5; }
.rbt-access-sub--ok    { color:var(--teal-dk); font-weight:600; }
.rbt-access-sub--error { color:var(--red); font-weight:600; }
.rbt-form-group        { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.rbt-input             { width:100%; padding:14px 16px; border:2px solid var(--border); border-radius:var(--r-md); font-size:16px; color:var(--ink); background:var(--white); outline:none; transition:border-color .2s; }
.rbt-input:focus       { border-color:var(--purple); }
.rbt-input::placeholder{ color:var(--ink3); }
.cont_con_acceso       { width:100%; min-height:120px; border:2.5px dashed var(--purple); border-radius:var(--r-md); padding:32px 16px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--purple); margin-bottom:14px; background-size:cover; background-position:center; }
.cont_con_acceso:hover { background-color:var(--purple-lt); }
.cont_con_acceso svg   { width:36px; height:36px; }
.cont_con_acceso span  { font-weight:600; font-size:15px; }
.rbt-form-actions      { display:flex; flex-direction:column; gap:10px; }
.rbt-hint              { font-size:13px; color:var(--ink3); margin-top:12px; line-height:1.5; }

/* ── GAME HUD ── */
.rbt-screen--game          { background:var(--bg); }
.rbt-game-header           { position:relative; background:var(--white); }
.rbt-game-header-top       { position:fixed; top:0; left:0; right:0; z-index:100; max-width:480px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:8px 11px; height:48px; gap:6px; background:var(--white); border-bottom:1px solid var(--border); box-shadow:var(--sh-sm); }
.rbt-game-header-logo      { flex-shrink:0; }
.rbt-game-header-nav       { display:flex; gap:2px; }
.rbt-game-header-right     { display:flex; gap:2px; }

.rbt-game-info-bar         { display:grid; grid-template-columns:1fr auto auto; gap:1px; background:var(--border); border-top:1px solid var(--border); margin-top:48px; }
.rbt-game-info-bar > div   { background:var(--white); padding:7px 10px; }
.rbt-info-label            { display:block; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:1px; }
.rbt-info-val              { font-family:var(--font-title); font-size:11px; font-weight:700; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rbt-info-pos              { display:block; font-size:10px; color:var(--purple); font-weight:500; font-style:normal; }
.rbt-info-num              { font-family:var(--font-title); font-size:20px; font-weight:800; color:var(--ink); display:block; line-height:1; }
.rbt-info-num small        { font-size:11px; font-weight:500; color:var(--ink3); }
.rbt-info-num--big         { font-size:30px; color:var(--red); }
.rbt-game-info-level--closed { display:none; }
.rbt-game-info-level--open   { display:block; }

.rbt-timer-bar        { display:flex; justify-content:space-around; background:var(--yellow); padding:5px 10px; }
.rbt-timer-item       { text-align:center; }
.rbt-timer-item span  { font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); display:block; }
.rbt-timer-item strong{ font-family:var(--font-title); font-size:14px; font-weight:800; color:var(--ink); }

.cab_mensa          { position:relative; }
.cab_mensa span     { position:absolute; top:4px; right:4px; min-width:14px; height:14px; border-radius:50%; background:var(--red); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 2px; }
.cab_mensa.opMenON  { color:var(--red); }

/* ── SCORE ── */
.rbt-score-hero        { margin-bottom:16px; }
.rbt-scores-title      { font-family:var(--font-title); font-size:18px; font-weight:800; color:var(--ink); margin-bottom:12px; }
.rbt-score-group-title { font-family:var(--font-title); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--purple); margin:16px 0 8px; }
.rbt-game-info-grid    { display:grid; grid-template-columns:1fr auto auto; gap:1px; background:var(--border); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); }
.rbt-game-info-grid > div { background:var(--white); padding:10px 12px; }
.rbt-score-table       { background:var(--white); border-radius:var(--r-md); border:1px solid var(--border); overflow:hidden; margin-bottom:16px; }
.rbt-score-head        { display:grid; grid-template-columns:36px 1fr 64px; padding:8px 12px; background:var(--bg); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); border-bottom:1px solid var(--border); }
.rbt-score-row         { display:grid; grid-template-columns:36px 1fr 64px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--border); }
.rbt-score-row:last-child   { border:none; }
.rbt-score-row--noborder    { border-bottom:none; }
.rbt-score-row--me          { background:var(--purple-lt); }
.rbt-score-rank             { font-family:var(--font-title); font-size:15px; font-weight:800; color:var(--ink3); text-align:center; }
.rbt-score-row--me .rbt-score-rank { color:var(--purple); }
.rbt-score-player strong    { display:block; font-size:13px; font-weight:700; color:var(--ink); }
.rbt-score-player span      { font-size:11px; color:var(--ink3); }
.rbt-score-player em        { display:block; font-size:10px; color:var(--purple); font-style:normal; font-weight:500; }
.rbt-score-pts              { font-family:var(--font-title); font-size:16px; font-weight:800; color:var(--ink); text-align:right; }
.rbt-score-row--me .rbt-score-pts { color:var(--red); }

/* ── MENU #pop_menu ── */
#pop_menu {
  position:fixed; top:0; right:0; z-index:8000;
  width:min(320px,85vw); height:100dvh;
  background:var(--white); box-shadow:var(--sh-lg);
  display:flex; flex-direction:column;
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
#pop_menu.page-enter-de { transform:translateX(105%); }

.rbt-menu-header   { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.rbt-menu-logo     { display:flex; align-items:center; }
.rbt-menu-close    { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); transition:background .15s; }
.rbt-menu-close:hover { background:var(--purple-lt); }
.rbt-menu-close svg{ width:22px; height:22px; display:block; }
.rbt-menu-nav      { flex:1; overflow-y:auto; padding:8px 0; }
.rbt-menu-item     { display:flex; align-items:center; padding:14px 18px; font-size:16px; font-weight:500; color:var(--ink); cursor:pointer; border-left:3px solid transparent; transition:background .15s, color .15s, border-color .15s; }
.rbt-menu-item:hover { background:var(--purple-lt); color:var(--purple); border-left-color:var(--purple); }
.rbt-menu-langs    { padding:14px 16px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.rbt-lang-btn      { width:32px; height:22px; border-radius:4px; background-size:cover; background-position:center; border:2px solid transparent; cursor:pointer; transition:border-color .15s; }
.rbt-lang-btn._langSel_ { border-color:var(--purple); }

/* ── POPUPS (bottom-sheets) ── */
.rbt-popup {
  position:fixed; inset:0; z-index:7000;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(26,26,46,.5); backdrop-filter:blur(3px);
  transition:opacity 0.3s, transform 0.3s;
}
.rbt-popup.page-enter-iz { opacity:0; pointer-events:none; transform:translateY(100%); }
.rbt-popup-fle  { position:absolute; inset:0; cursor:pointer; }
.rbt-popup-box  {
  position:relative; z-index:1; width:100%; max-width:480px;
  background:var(--white); border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:32px 22px max(28px,env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:14px;
}
.rbt-popup-icon         { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; background:var(--purple-lt); color:var(--purple); }
.rbt-popup-icon svg     { width:28px; height:28px; }
.rbt-popup-icon--alert  { background:var(--blue-lt);  color:var(--blue); }
.rbt-popup-icon--warn   { background:#FFF4E0;          color:#FF6B35; }
.rbt-popup-icon--info   { background:var(--teal-lt);  color:var(--teal-dk); }
.rbt-popup-icon--gameover{ background:var(--red-lt);  color:var(--red); }
.rbt-popup-icon--pause  { background:#FFF9D0;          color:var(--yellow-dk); }
.rbt-popup-icon--group  { background:var(--purple-lt);color:var(--purple); }
.rbt-popup-title        { font-family:var(--font-title); font-size:21px; font-weight:800; color:var(--ink); text-align:center; line-height:1.2; }
.rbt-popup-body         { font-size:15px; color:var(--ink2); text-align:center; line-height:1.6; }
.rbt-popup-hint         { font-size:12px; color:var(--ink3); text-align:center; line-height:1.5; }
.rbt-popup-actions      { display:flex; gap:10px; }
.rbt-popup-actions .rbt-btn { flex:1; }

/* ── TRANSITIONS ── */
._animateBot { animation:bounceUp .6s .2s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bounceUp { from{opacity:0;transform:translateY(16px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ── SAFE AREAS ── */
.rbt-header   { padding-top: max(10px, env(safe-area-inset-top)); }
.rbt-play-bar { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

/* ── FINISH SCREEN ── */
.rbt-finish-char  { font-family:var(--font-title); font-size:22px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.rbt-finish-trophy{ font-size:64px; margin:8px 0; }
.rbt-finish-title { font-family:var(--font-title); font-size:28px; font-weight:800; color:var(--ink); line-height:1.2; margin-bottom:20px; }
.rbt-finish-score { background:var(--purple-lt); border-radius:var(--r-lg); padding:20px; margin:0 16px 20px; }
.rbt-finish-score span { font-size:13px; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:4px; }
.rbt-finish-score strong { font-family:var(--font-title); font-size:18px; font-weight:800; color:var(--purple); display:block; margin-bottom:8px; }
.rbt-finish-pts   { font-family:var(--font-title); font-size:36px; font-weight:800; color:var(--red); }
.rbt-finish-pts small { font-size:14px; font-weight:500; color:var(--ink3); }

/* ── GAME FICHA ── */
.rbt-game-ficha-title { font-family:var(--font-title); font-size:26px; font-weight:800; color:var(--ink); margin-bottom:14px; line-height:1.1; }
.rbt-game-langs  { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.rbt-chars-grid  { display:flex; flex-direction:column; gap:12px; }
.rbt-char-card   { background:var(--white); border-radius:var(--r-md); border:1px solid var(--border); overflow:hidden; }
.rbt-char-card-img  { cursor:pointer; }
.rbt-char-card-img img { width:100%; height:auto; display:block; }

.rbt-char-card-media        { position:relative; width:100%; overflow:hidden; }
.rbt-char-card-media--169   { aspect-ratio:16/9; }
.rbt-char-card-media--916   { aspect-ratio:var(--char-media-vert); }

.rbt-char-card-name { font-family:var(--font-title); font-size:16px; font-weight:800; color:var(--ink); padding:10px 12px 2px; }
.rbt-char-card-tex  { font-size:13px; color:var(--ink3); padding:0 12px 10px; line-height:1.4; }

/* ── LEVELS LIST ── */
.rbt-levels-stats { display:flex; gap:1px; background:var(--border); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); margin-bottom:4px; }
.rbt-levels-stat  { flex:1; background:var(--white); padding:14px; text-align:center; }
.rbt-levels-stat strong { font-family:var(--font-title); font-size:28px; font-weight:800; color:var(--ink); display:block; }
.rbt-levels-stat span   { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); }
.rbt-levels-stat--done strong { color:var(--teal-dk); }
.rbt-levels-list { display:flex; flex-direction:column; gap:8px; }
.rbt-level-item  { display:flex; align-items:center; gap:12px; padding:14px; background:var(--white); border-radius:var(--r-md); border:1px solid var(--border); cursor:pointer; transition:transform .15s; }
.rbt-level-item--done   { border-color:var(--teal); background:var(--teal-lt); }
.rbt-level-item--open   { border-color:var(--purple); }
.rbt-level-item--locked { opacity:.5; cursor:default; }
.rbt-level-item:active  { transform:scale(.98); }
.rbt-level-item-num     { font-family:var(--font-title); font-size:20px; font-weight:800; color:var(--ink3); width:32px; text-align:center; flex-shrink:0; }
.rbt-level-item--done .rbt-level-item-num   { color:var(--teal-dk); }
.rbt-level-item--open .rbt-level-item-num   { color:var(--purple); }
.rbt-level-item-info    { flex:1; }
.rbt-level-item-info strong { display:block; font-size:14px; font-weight:700; color:var(--ink); }
.rbt-level-item-info span   { font-size:12px; color:var(--ink3); }
.rbt-level-item-check, .rbt-level-item-arrow, .rbt-level-item-lock { flex-shrink:0; }
.rbt-level-item-check   { color:var(--teal-dk); font-size:18px; font-weight:700; }
.rbt-level-item-arrow   { width:18px; height:18px; color:var(--purple); }
.rbt-level-item-lock    { width:18px; height:18px; color:var(--ink3); }

/* ── MAPS ── */
.rbt-map-full   { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.rbt-map-stats  { position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:1000; display:flex; gap:1px; background:var(--border); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); box-shadow:var(--sh-md); }
.rbt-map-info   { position:absolute; bottom:0; left:0; right:0; z-index:1000; background:var(--white); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:20px 20px max(20px,env(safe-area-inset-bottom)); box-shadow:var(--sh-lg); }
.rbt-map-info-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:4px; }
.rbt-map-info-title { font-family:var(--font-title); font-size:20px; font-weight:800; color:var(--ink); }
.rbt-map-info-dist  { font-size:14px; color:var(--purple); font-weight:600; margin-top:4px; }
.rbt-map-unlock     { position:absolute; bottom:0; left:0; right:0; z-index:2000; }
.rbt-map-unlock-inner { background:linear-gradient(135deg,var(--teal),var(--teal-dk)); color:white; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:24px 20px max(20px,env(safe-area-inset-bottom)); text-align:center; position:relative; }
.rbt-map-unlock-text { font-size:16px; line-height:1.5; margin-bottom:16px; }
.rbt-map-unlock-text span { display:block; font-family:var(--font-title); font-size:20px; font-weight:800; margin-top:6px; }
.rbt-map-unlock-close { position:absolute; top:12px; right:16px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; }
.rbt-map-loc { padding:6px 12px; border-radius:var(--r-full); font-size:12px; font-weight:700; }
.rbt-map-loc--done   { background:var(--teal-lt); color:var(--teal-dk); }
.rbt-map-loc--open   { background:var(--purple-lt); color:var(--purple); }
.rbt-map-loc--locked { background:var(--red-lt); color:var(--red); }
/* Leaflet popup override */
.rbt-map-win     { padding:8px; min-width:160px; font-family:"DM Sans",sans-serif; }
.rbt-map-win-t   { font-family:var(--font-title); font-size:15px; font-weight:800; color:var(--ink); margin-bottom:4px; }
.rbt-map-win-s   { font-size:12px; color:var(--ink3); margin-bottom:10px; }
.rbt-map-win-btn { background:var(--purple); color:white; border-radius:var(--r-full); padding:8px 16px; font-family:var(--font-title); font-size:13px; font-weight:700; cursor:pointer; text-align:center; }

/* ── MENSAJES ── */
.rbt-mns-nav     { display:flex; align-items:center; gap:4px; padding:8px 12px; background:var(--white); border-bottom:1px solid var(--border); }
.rbt-mns-ids     { display:flex; justify-content:space-between; padding:10px 16px; background:var(--bg); border-bottom:1px solid var(--border); font-size:13px; }
.rbt-mns-id-from { font-weight:600; color:var(--ink); }
.rbt-mns-id-to   { color:var(--ink3); }
.rbt-mns-item    { display:flex; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; background:var(--white); transition:background .15s; }
.rbt-mns-item:hover { background:var(--bg); }
.rbt-mns-item-body { flex:1; font-size:14px; color:var(--ink2); }
.rbt-mns-item-body span { font-weight:700; color:var(--ink); display:block; margin-bottom:2px; }
.rbt-mns-item-date { font-size:11px; color:var(--ink3); margin-top:4px; }
.rbt-mns-item-badge { flex-shrink:0; }
.rbt-mns-grup-dot { width:10px; height:10px; border-radius:50%; background:var(--red); display:inline-block; }
.rbt-mns-sep     { text-align:center; font-size:11px; color:var(--ink3); padding:8px 0; font-weight:600; }
.rbt-mns-bubble  { max-width:75%; padding:10px 14px; border-radius:var(--r-lg); font-size:14px; line-height:1.5; margin-bottom:8px; position:relative; }
.rbt-mns-bubble strong { display:block; font-size:10px; font-weight:500; color:var(--ink3); margin-top:4px; }
.rbt-mns-bubble--in  { background:var(--white); border:1px solid var(--border); color:var(--ink); border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg); }
.rbt-mns-bubble--in span { font-size:11px; color:var(--purple); font-weight:600; display:block; margin-bottom:3px; }
.rbt-mns-bubble--out { background:var(--purple); color:white; border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg); margin-left:auto; }
.rbt-mns-bubble--out strong { color:rgba(255,255,255,.6); }
.rbt-mns-input   { display:flex; align-items:flex-end; gap:8px; padding:10px 14px; background:var(--white); border-top:1px solid var(--border); position:sticky; bottom:0; }
.rbt-mns-input textarea { flex:1; border:2px solid var(--border); border-radius:var(--r-md); padding:10px 12px; font-size:15px; font-family:"DM Sans",sans-serif; resize:none; outline:none; max-height:120px; transition:border-color .2s; }
.rbt-mns-input textarea:focus { border-color:var(--purple); }
.rbt-mns-send    { width:44px; height:44px; border-radius:50%; background:var(--purple); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.rbt-mns-send svg { width:20px; height:20px; color:white; }
.rbt-mns-player  { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; font-size:15px; font-weight:500; color:var(--ink); }
.rbt-mns-player span { font-size:12px; color:var(--ink3); margin-left:auto; }
.rbt-mns-player svg { width:18px; height:18px; color:var(--ink3); flex-shrink:0; }
.rbt-mns-check   { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); font-size:15px; color:var(--ink); }

/* ── SPEAKS ── */
.rbt-screen--speaks  { background:var(--bg); min-height:100dvh; position:relative; }
.rbt-speaks-fle      { position:fixed; top:0; left:0; right:0; height:48px; z-index:10; display:flex; align-items:center; padding:0 14px; background:var(--white); border-bottom:1px solid var(--border); box-shadow:var(--sh-sm); cursor:pointer; max-width:480px; margin:0 auto; }
.rbt-speaks-scroll   { padding:60px 20px 40px; }
.rbt-speaks-spk      { width:56px; height:56px; border-radius:50%; background:var(--purple-lt); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; cursor:pointer; color:var(--purple); transition:background .15s; }
.rbt-speaks-spk.speaker_on  { background:var(--purple); color:white; }
.rbt-speaks-spk svg { width:26px; height:26px; }
.rbt-speaks-title    { font-family:var(--font-title); font-size:16px; font-weight:800; color:var(--purple); text-transform:uppercase; letter-spacing:.06em; margin:20px 0 8px; }
.rbt-speaks-text     { font-size:15px; color:var(--ink2); line-height:1.7; }

/* ── GAME FICHA — info blocks ── */
.rbt-game-info-block        { background:var(--white); border-radius:var(--r-md); border:1px solid var(--c-border,var(--border)); padding:14px; margin-bottom:10px; }
.rbt-game-info-block-title  { font-family:var(--font-title); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--purple); margin-bottom:6px; }
.rbt-game-info-block-text   { font-size:14px; color:var(--ink2); line-height:1.6; }

/* ── LEVEL SCREEN content ── */
.rbt-level-title     { font-family:var(--font-title); font-size:24px; font-weight:800; color:var(--ink); line-height:1.2; margin-bottom:4px; }
.rbt-level-num       { font-family:var(--font-title); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--purple); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.rbt-level-done-badge{ background:var(--teal-lt); color:var(--teal-dk); padding:2px 8px; border-radius:var(--r-full); font-size:11px; }

.rbt-level-ops-bar   { display:flex; align-items:center; gap:8px; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:14px 0; }
.rbt-level-ops-label { flex:1; font-family:var(--font-title); font-size:13px; font-weight:700; color:var(--ink); }

.rbt-level-text      { font-size:15px; color:var(--ink2); line-height:1.7; margin-bottom:16px; }

.rbt-level-mission-card {
  background:linear-gradient(135deg, var(--purple), #5B1A9E);
  color:white; border-radius:var(--r-lg); padding:20px; margin-bottom:16px;
}
.rbt-level-mission-label  { font-family:var(--font-title); font-size:20px; font-weight:800; margin-bottom:8px; }
.rbt-level-mission-card p { font-size:14px; line-height:1.6; opacity:.9; margin-bottom:8px; }
.rbt-level-mission-card strong { display:block; font-size:18px; font-weight:800; margin-bottom:16px; }
.rbt-level-see-opts  { margin-top:16px; }

.rbt-level-options   { margin-top:8px; }
.rbt-level-option-item { background:var(--white); border-radius:var(--r-md); border:1px solid var(--border); padding:14px; margin-bottom:10px; }
.rbt-level-option-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:6px; }
.rbt-level-option-text  { font-size:17px; font-weight:500; color:var(--ink); line-height:1.5; margin-bottom:12px; }

.rbt-level-end-actions   { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.rbt-level-end-badge     { display:inline-flex; align-items:center; background:var(--teal-lt); color:var(--teal-dk); border-radius:var(--r-full); padding:6px 14px; font-family:var(--font-title); font-size:13px; font-weight:700; margin-bottom:16px; }

.rbt-level-score-display { background:var(--purple-lt); border-radius:var(--r-md); padding:14px; text-align:center; font-size:15px; color:var(--ink2); margin-bottom:14px; }
.rbt-level-score-num     { font-family:var(--font-title); font-size:28px; font-weight:800; color:var(--purple); display:inline-block; margin:0 6px; }

.rbt-level-position       { text-align:center; padding:20px 0; }
.rbt-level-position-label { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); margin-bottom:4px; }
.rbt-level-position-title { font-family:var(--font-title); font-size:26px; font-weight:800; color:var(--purple); margin-bottom:6px; }
.rbt-level-position-info  { font-size:14px; color:var(--ink2); line-height:1.5; }

.rbt-level-mns-pop        { background:rgba(26,26,46,.7); border-radius:var(--r-lg); padding:20px; margin-top:16px; }
.rbt-level-mns-pop-inner  { background:var(--white); border-radius:var(--r-md); padding:16px; }
.rbt-level-mns-pop-label  { font-family:var(--font-title); font-size:14px; font-weight:700; color:var(--purple); margin-bottom:8px; }

.rbt-level-selected-option { background:var(--blue-lt); border-radius:var(--r-md); padding:14px; margin-bottom:14px; }
.rbt-level-selected-label  { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:4px; }
.rbt-level-selected-option p { font-size:14px; color:var(--ink2); }

.rbt-level-finish-banner  { text-align:center; padding:24px 0 16px; }
.rbt-level-finish-icon    { font-size:56px; margin-bottom:8px; }
.rbt-level-finish-text    { font-family:var(--font-title); font-size:24px; font-weight:800; color:var(--ink); line-height:1.2; }

.rbt-level-locked         { text-align:center; padding:32px 0; }
.rbt-level-locked-icon    { width:80px; height:80px; border-radius:50%; background:var(--red-lt); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--red); }
.rbt-level-locked-dist    { font-size:15px; color:var(--ink2); margin-top:8px; }
.rbt-level-locked-dist strong { color:var(--red); }

/* ── VIDEO POP ── */
.rbt-videopop           { position:fixed; inset:0; z-index:8000; background:rgba(26,26,46,.92); display:flex; flex-direction:column; justify-content:center; }
.rbt-videopop.page-enter-de { display:none; } /* _OFF_ */
.rbt-videopop._OFF_     { display:none!important; }
.rbt-videopop-inner     { position:relative; z-index:1; }
.rbt-videopop-video     { width:100%; display:block; max-height:60dvh; object-fit:contain; }
.rbt-videopop-play      { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.rbt-videopop-play::after { content:""; border-left:20px solid var(--ink); border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:4px; }
.rbt-videopop-close     { position:absolute; inset:0; z-index:0; cursor:pointer; }

/* ── FIXED HEADERS — compensar espacio ── */
/* Header normal: 58px */
.rbt-screen > .rbt-main,
.rbt-screen > main.rbt-main { padding-top: calc(58px + 16px); }

/* Game header: variable según barras visibles.
   Usamos un min de 48px (top bar) + margen */
.rbt-screen--game > .rbt-main,
.rbt-screen--game > main.rbt-main { padding-top: 16px; }

/* Safe area en iPhone con notch */
.rbt-header,
.rbt-game-header-top { padding-top: max(10px, env(safe-area-inset-top)); }

/* ── LEVEL OPTIONS — texto > botón ── */
.rbt-level-option-item      { background:var(--white); border-radius:var(--r-md); border:2px solid var(--border); padding:16px; margin-bottom:10px; transition:border-color .15s; }
.rbt-level-option-item:hover{ border-color:var(--purple); }
.rbt-level-option-select    {
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--purple); cursor:pointer; margin-top:4px;
  padding:6px 0; border:none; background:none;
  gap:4px;
}
.rbt-level-option-select::after {
  content:"→"; font-size:14px;
}

/* ── CHAR — botón de jugar inline (arriba, tras el nombre) ── */
.rbt-play-bar-inline {
  padding: 0 0 14px;
}
.rbt-play-bar-inline._OFF_ { display: none !important; }

/* ── GAME — cont_play (barra de jugar, aparece al seleccionar personaje) ── */
.cont_play.rbt-cont-play {
  position: fixed;
  top: 58px;                          /* justo bajo el header fijo */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 90;
  padding: 10px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-md);
}

/* _modTopCont: el JS la añade al .cont para hacer hueco al cont_play */
.cont._modTopCont {
  padding-top: calc(58px + 62px);     /* header + cont_play */
}

/* ── GAME — fotos de personaje más grandes ──
.rbt-char-card-img {
  height: 160px; 
} */

/* ── MENSAJES — hero de la pantalla principal ── */
.rbt-mns-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0 28px;
  gap: 8px;
}
.rbt-mns-hero-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--purple-lt);
  display: flex; align-items: center; justify-content: center;
  color: var(--purple);
  margin-bottom: 4px;
}
.rbt-mns-hero-icon svg { width: 34px; height: 34px; }
.rbt-mns-hero-name {
  font-family: var(--font-title);
  font-size: 20px; font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.rbt-mns-hero-label {
  font-size: 13px;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

/* ── AI ASSISTANT ── */
.rbt-ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #1A0A2E, #7B2FBE);
  color: white;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(123,47,190,.35);
  transition: transform .12s;
}
.rbt-ai-btn:active { transform: scale(.97); }
.rbt-ai-btn svg    { width: 18px; height: 18px; flex-shrink: 0; }

/* POP — fullscreen sobre el contenido */
.rbt-ai-pop {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: #000;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background-size: auto;        /* tamaño real */
  background-position: center top;  /* centrada, pegada arriba */
  background-repeat: no-repeat;
}
.rbt-ai-pop._OFF_ { display: none !important; }

.rbt-ai-pop-bg {
  width: 100%;
  height: auto;
  display: block;
  *flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
}

.rbt-ai-pop-frame {
  position: absolute;
  border: none;
  background: transparent;
}

.rbt-ai-pop-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background .15s;
}
.rbt-ai-pop-close:hover { background: rgba(255,255,255,.3); }
.rbt-ai-pop-close svg   { width: 18px; height: 18px; }


.video-if-wrapper,
.video-if-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}