/* Ampel-Spiel: Spielfeld links, Status und Ergebnisse rechts */
.reaction-play-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,320px);
  align-items:start;
  gap:16px;
  max-width:1120px;
  margin:0 auto;
}

.reaction-play-layout .reaction{
  width:100%;
  max-width:none;
  margin:0;
}

.reaction-side{
  position:sticky;
  top:12px;
  display:grid;
  gap:12px;
  min-width:0;
}

.reaction-side .challenge-panel{
  width:100%;
  max-width:none;
  margin:0;
  padding:16px;
}

.reaction-side .challenge-rule{
  align-items:flex-start;
  flex-direction:column;
  gap:5px;
  padding-bottom:12px;
}

.reaction-side .challenge-rule strong{
  font-size:.95rem;
}

.reaction-side .challenge-metrics{
  grid-template-columns:1fr;
  gap:7px;
  margin-top:10px;
}

.reaction-side .challenge-metrics div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
}

.reaction-side .challenge-metrics strong{
  margin-top:0;
  text-align:right;
}

.reaction-side .attempt-dots{
  margin-top:12px;
}

.reaction-side .challenge-result{
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  grid-template-columns:1fr!important;
  align-content:start;
  gap:14px;
  padding:18px;
}

.reaction-side .challenge-result .attempt-result{
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.reaction-side .challenge-result .attempt-result strong{
  font-size:clamp(1.8rem,3.2vw,2.7rem)!important;
}

.reaction-side .challenge-result .challenge-result-copy strong{
  font-size:1.15rem;
}

.reaction-side .challenge-result .primary,
.reaction-side .challenge-result .secondary{
  width:100%;
}

@media(max-width:699px), (orientation:portrait){
  .reaction-play-layout{
    grid-template-columns:1fr;
    max-width:760px;
  }

  .reaction-side{
    position:static;
  }

  .reaction-side .challenge-metrics{
    grid-template-columns:repeat(3,1fr);
  }

  .reaction-side .challenge-metrics div{
    display:block;
  }

  .reaction-side .challenge-metrics strong{
    margin-top:3px;
    text-align:left;
  }
}

@media(max-height:760px) and (min-width:700px) and (orientation:landscape){
  #reactionScreen .game-head{
    padding-top:4px;
    padding-bottom:8px;
  }

  .reaction-play-layout{
    grid-template-columns:minmax(0,1fr) minmax(230px,285px);
    gap:12px;
  }

  .reaction-play-layout .reaction{
    padding:18px;
  }

  .reaction-play-layout .lights{
    max-width:330px;
    margin-bottom:14px;
    padding:14px;
  }

  .reaction-play-layout .pad{
    min-height:175px;
    padding:18px;
  }

  .reaction-side{
    gap:10px;
  }

  .reaction-side .challenge-panel{
    padding:13px;
  }

  .reaction-side .challenge-metrics div{
    padding:7px 9px;
  }

  .reaction-side .attempt-dots span{
    width:32px;
    height:32px;
  }

  .reaction-side .challenge-result{
    padding:14px;
    gap:10px;
  }
}