/* Cards grid – UL/LI + button.card */
#imsem-ably-chat .cards-container {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid ;
  gap: 14px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  grid-template-columns: repeat(4, minmax(8px, 1fr));
}
#imsem-ably-chat .cards-container > li { margin: 0 !important; }

@media (min-width: 576px) {
  #imsem-ably-chat .cards-container { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
}
@media (min-width: 992px) {
  #imsem-ably-chat .cards-container { grid-template-columns: repeat(5, minmax(130px, 1fr)); }
}

/* Kaart */
#imsem-ably-chat .cards-container .card {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 14px;
  background: #eef0f5;
  border: 1px solid #d9dee7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(0,0,0,.06);
  color: #111;
  cursor: pointer;
  padding: 0;
  transition: transform .06s ease-in-out, box-shadow .15s ease, border-color .15s ease;
}
#imsem-ably-chat .cards-container .card:hover { transform: translateY(-1px); }
#imsem-ably-chat .cards-container .card:active { transform: translateY(0); }
#imsem-ably-chat .cards-container .card.active {
  border-color: #ff5d20;
  box-shadow: 0 0 0 3px rgba(255,122,0,.18), inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(0,0,0,.06);
}
#imsem-ably-chat .pokerboardbutton:hover,
#imsem-ably-chat .pokerboardbutton:hover .center-icon,
#imsem-ably-chat .pokerboardbutton:hover .center-icon > span,
#imsem-ably-chat .pokerboardbutton:hover .left-icon,
#imsem-ably-chat .pokerboardbutton:hover .right-icon,
#imsem-ably-chat .pokerboardbutton.active,
#imsem-ably-chat .pokerboardbutton:focus-visible,
#imsem-ably-chat .pokerboardbutton.active .center-icon,
#imsem-ably-chat .pokerboardbutton.active .left-icon,
#imsem-ably-chat .pokerboardbutton.active .right-icon,
#imsem-ably-chat .pokerboardbutton.active .center-icon > span {
  background-color: #ff5d20;
  color:#FFFFFF;
}
/* Hoeken en midden */
#imsem-ably-chat .left-icon,
#imsem-ably-chat .right-icon {
  position: absolute;
  font-size: .85rem;
  line-height: 1;
  color: #6b7280;
  pointer-events: none;
}
#imsem-ably-chat .left-icon  { top: .4rem; left: .5rem; }
#imsem-ably-chat .right-icon { bottom: .4rem; right: .5rem; transform: rotate(-180deg);}

#imsem-ably-chat .center-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64%; height: 64%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: #f3f5f9;
  border: 1px solid #dfe3ea;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
#imsem-ably-chat .center-icon > span,
#imsem-ably-chat .center-icon > i {
  font-size: clamp(1rem, 4.6vw, 1.6rem);
  color: #1f2937;
}

/* Who-plays + Results */
.who-plays { border-top: 1px dashed #e5e7eb; padding-top: .5rem; margin-top: .5rem; }
.who-plays-title { font-weight: 600; font-size: 1rem; margin-bottom: .35rem; }
.who-plays-list .player { display:flex; align-items:center; justify-content:space-between; padding:.25rem 0; border-bottom:1px dotted #eef2f7; }
.who-plays-list .player:last-child { border-bottom:0; }
.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.status-dot.is-red { background:#ef4444; }
.status-dot.is-green { background:#34d399; }
.player .name { font-size:.95rem; }

.poker-results { border:1px dotted #ff5d20; border-radius:10px; padding:.75rem; }
.poker-results h3 {color: #ff5d20;}
.results-list .result-row{ display:flex; align-items:center; justify-content:space-between; padding:.3rem 0; border-bottom:1px dotted #ff5d20; }
.results-list .result-row:last-child{ border-bottom:0; }
.results-list .res-value {
  padding-right: .2em;
  color: #ff5d20;
  font-weight: 1000;
  font-size: large;
}

/* Spectator */
#imsem-ably-chat.is-spectator .cards-container .card { pointer-events:none; opacity:.55; }


.theme-planningpoker {
  position: relative;
  padding: 12rem 0;
  width: 100%;
  height: 100%;
}

/* Player list: 3 kolommen (icoon | naam | vote) */
.who-plays-list .player {
  padding: .35rem 0;
  border-bottom: 1px dotted #eef2f7;
}
.who-plays-list .player:last-child { border-bottom: 0; }

.who-plays-list .icon-col {
  line-height: 1;
}
.who-plays-list .status-icon {
  font-size: 1.25rem; /* groter icoon */
  vertical-align: middle;
}
.who-plays-list .status-icon.is-red   { color: #ef4444; }  /* rood  */
.who-plays-list .status-icon.is-green { color: #34d399; }  /* groen */

.who-plays-list .name-col {
  /* zorg voor nette tekst */
  font-size: .95rem;
  line-height: 1.2;
}
.who-plays-list .name-wrap {
  /* lange namen mogen afbreken / wikkelen */
  overflow-wrap: anywhere;     /* moderne browsers */
  word-break: break-word;      /* fallback */
  hyphens: auto;
}

.who-plays-list .vote-flag .ok { font-weight: 700; }
.who-plays-list .vote-flag .no { opacity: .7; }


/* Stats boven de resultaatlijst */
.poker-results .results-stats .stats-line {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: .25rem;
  font-size: .95rem;
}

/* Outlier highlighten */
.poker-results .result-row.is-outlier .res-value {
  color: #b91c1c;           /* rood */
  font-weight: 700;
}
.poker-results .result-row.is-outlier .res-name::after {
  content: " outlier";
  font-size: .75rem;
  color: #b91c1c;
  margin-left: .35rem;
  opacity: .85;
}

button.flipboard,
button.flipnewgame,
button.flipboard:focus,
button.flipnewgame:focus
{
  background-color: #ff5d20;
  color:#FFFFFF;
  width:100%;
}
button.flipboard:hover,
button.flipnewgame:hover {
  background-color: #ff5d20;
  border: 1px solid #d9dee7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 2px rgba(0, 0, 0, .06);
  color: #FFF;
  cursor: pointer;
  transition: transform .06s ease-in-out, box-shadow .15s ease, border-color .15s ease;
  width: 100%;
  font-weight: bold;
}
button.sharethisboard {
  border-color: #ff5d20 !important;
  height: 100%;
}
button.sharethisboard:hover,
button.sharethisboard > .fa-check,
button.sharethisboard > .fa-check:active,
button.sharethisboard:active > .fa-check:active,
button.sharethisboard:hover > .fa-check:hover {
  background-color: #ff5d20;
  color:#FFFFFF;
}
/* als de button een fa-check icoon bevat → orange */
.sharethisboard.btn:has(.fa-check) {
  border-color: #ff5d20; /* jouw oranje */
  background-color: #ff5d20;
  color: #fff; /* witte tekst/icoon */
}
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #FFFFFF;
  background-color: #ff5d20;
  border-color: #ff5d20;
}
button.playereditlink {
  color:#ff5d20;
}
button.playereditlink:hover {
  color: #ff5d20;
  text-decoration: underline;
  background-color: transparent;
  border-color: transparent;
}

#imsemNameModal .modal-content {
  background-color:black;
  border:0.1em solid #ff5d20;
}
#imsemNameModal .modal-header {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  border-bottom: none;
}
#imsemNameModal .modal-title {

}
#imsemNameModal .modal-body {

}
#imsemNameModal .modal-footer {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  border-top: none;
}
#imsemNameInput {
  border: 1px dotted #ff5d20 !important;
  color:  #ff5d20 !important;
  font-weight: 1000;
}
button#imsemNameSave,
button#imsemNameSave:focus
{
  background-color: #ff5d20;
  color:#FFFFFF;
  width:100%;
}
button#imsemNameSave:hover {
  background-color: #ff5d20;
  border: 1px solid #d9dee7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 2px rgba(0, 0, 0, .06);
  color: #FFF;
  cursor: pointer;
  transition: transform .06s ease-in-out, box-shadow .15s ease, border-color .15s ease;
  width: 100%;
  font-weight: bold;
}
.navbar .align-self-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*width: 100%;  !* makes sure it stretches full row *!*/
}