/* R4X v2351 · Contextual Wissens-Navigator bridge for Beginner phases */
.r4x-wn-bridge{
  position:relative;
  margin:1.55rem 0 1.8rem;
  padding:1.35rem;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.28);
  border-radius:12px;
  background:
    radial-gradient(circle at 94% 8%,rgba(212,175,55,.11),transparent 33%),
    linear-gradient(145deg,rgba(7,30,52,.96),rgba(3,17,31,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.18);
}
.r4x-wn-bridge::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,#f0d98c,#c9a84c 55%,rgba(201,168,76,.2));
}
.r4x-wn-bridge__head{
  display:flex;
  align-items:center;
  gap:.9rem;
}
.r4x-wn-bridge__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  flex:0 0 54px;
  border:1px solid rgba(212,175,55,.42);
  border-radius:10px;
  background:#fff;
  box-shadow:0 9px 22px rgba(0,0,0,.24);
}
.r4x-wn-bridge__icon img{
  display:block;
  width:34px;
  height:34px;
  object-fit:contain;
}
.r4x-wn-bridge__kicker{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem;
  margin:0 0 .2rem;
  color:#d4af37;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.25;
  text-transform:uppercase;
}
.r4x-wn-bridge__kicker .badge-free{font-size:.66rem;letter-spacing:.06em;}
.r4x-wn-bridge__title{
  margin:0;
  color:var(--text,#f4f1e8);
  font-size:1.08rem;
  font-weight:700;
  line-height:1.3;
}
.r4x-wn-bridge__copy{
  margin:.95rem 0 0;
  color:rgba(226,237,247,.84);
  font-size:.94rem;
  line-height:1.62;
}
.r4x-wn-bridge__directions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.45rem;
  margin:1rem 0;
}
.r4x-wn-bridge__direction{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.36rem;
  min-height:36px;
  padding:.48rem .55rem;
  border:1px solid rgba(204,222,237,.13);
  border-radius:7px;
  background:rgba(255,255,255,.045);
  color:rgba(237,242,247,.82);
  font-size:.73rem;
  font-weight:700;
  line-height:1.25;
  text-align:center;
}
.r4x-wn-bridge__direction span{
  color:#d4af37;
  font-size:.88rem;
  line-height:1;
}
.r4x-wn-bridge__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.72rem 1rem;
}
.r4x-wn-bridge .r4x-wn-bridge__primary{
  flex:0 0 auto;
  margin:0;
  white-space:normal;
}
.r4x-wn-bridge__alternatives{
  display:flex;
  align-items:center;
  flex:1 1 260px;
  flex-wrap:wrap;
  gap:.42rem;
  color:rgba(215,228,239,.64);
  font-size:.78rem;
}
.r4x-wn-bridge__alternatives > span{margin-right:.08rem;}
.r4x-wn-bridge__term{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:.38rem .62rem;
  border:1px solid rgba(212,175,55,.22);
  border-radius:999px;
  background:rgba(212,175,55,.07);
  color:rgba(246,241,226,.9);
  font-size:.77rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.r4x-wn-bridge__term:hover,
.r4x-wn-bridge__term:focus-visible{
  border-color:rgba(212,175,55,.54);
  background:rgba(212,175,55,.13);
  color:#fff;
}
.r4x-wn-bridge__note{
  display:flex;
  align-items:flex-start;
  gap:.45rem;
  margin:.9rem 0 0;
  padding-top:.82rem;
  border-top:1px solid rgba(204,222,237,.1);
  color:rgba(204,222,237,.66);
  font-size:.77rem;
  line-height:1.5;
}
.r4x-wn-bridge__note::before{
  content:"↩";
  color:#d4af37;
  font-weight:800;
}

@media (max-width:760px){
  .r4x-wn-bridge{margin:1.25rem 0 1.5rem;padding:1.1rem;}
  .r4x-wn-bridge__directions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .r4x-wn-bridge__actions{align-items:stretch;}
  .r4x-wn-bridge .r4x-wn-bridge__primary{width:100%;justify-content:center;text-align:center;}
  .r4x-wn-bridge__alternatives{flex-basis:100%;}
}

@media (max-width:430px){
  .r4x-wn-bridge{padding:1rem .9rem 1rem 1rem;border-radius:10px;}
  .r4x-wn-bridge__head{align-items:flex-start;gap:.72rem;}
  .r4x-wn-bridge__icon{width:46px;height:46px;flex-basis:46px;}
  .r4x-wn-bridge__icon img{width:29px;height:29px;}
  .r4x-wn-bridge__title{font-size:1rem;}
  .r4x-wn-bridge__copy{font-size:.88rem;line-height:1.58;}
  .r4x-wn-bridge__direction{min-height:34px;padding:.42rem .35rem;font-size:.68rem;}
  .r4x-wn-bridge__alternatives > span{flex-basis:100%;}
}

@media (prefers-reduced-motion:reduce){
  .r4x-wn-bridge__term{transition:none;}
}