/* Star styling for game ratings */
.star { display: inline-block; vertical-align: text-bottom; margin-right: 2px; }
.star svg { display: block; }
.star.full svg { filter: drop-shadow(0 0 0 rgba(0,0,0,0.0)); }
.star.half svg { /* half gradient handled by SVG */ overflow: visible; }
.star.empty svg { opacity: 0.9; }

.rating-summary { margin-top: 8px; }
.rating-summary .breakdown { margin-top: 6px; color: #666; display: flex; gap: 12px; }

/* Small screen adjustments */
@media (max-width: 480px) {
  .star svg { width: 14px; height: 14px; }
  .games-list .game-item { padding: 8px; }
  .game-image { width: 100%; height: auto; }
}

/* Hover and responsive polish */
.games-list .game-item { transition: transform 120ms ease, box-shadow 120ms ease; padding: 12px; border-radius: 6px; }
.games-list .game-item:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.game-item .meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.game-item .excerpt { color: #444; }

/* Review form star input */
.star-input { display: inline-flex; gap: 4px; }
.star-btn { background: transparent; border: none; cursor: pointer; padding: 2px; }
.star-btn svg path { fill: #e6e6e6; transition: fill 120ms ease; }
.star-btn.active svg path { fill: #f5c518; }

/* Grid layout for games list */
.games-list.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}
.games-list.grid .game-item.card { background: #fff; border: 1px solid #eee; padding: 8px; display: flex; flex-direction: column; min-height: 220px; box-sizing: border-box; position: relative; }
.game-thumb { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; display: block; }

/* Ensure card elements don't overlap due to parent styles */
.games-list.grid .game-item.card { clear: none; }

/* CSS-only 5-star rating (radio inputs + labels) — matches the example style */
.rating {
  direction: rtl; /* easier selector logic: place radios then labels and use ~ */
  unicode-bidi: bidi-override;
  display: inline-flex;
  gap: 6px;
}
.rating input[type="radio"] {
  display: none;
}
.rating label {
  font-size: 28px;
  color: #ddd;
  cursor: pointer;
  transition: color 0.12s ease-in-out;
  user-select: none;
}
.rating label:hover,
.rating label:hover ~ label {
  color: #f5c518; /* gold on hover */
}
.rating input[type="radio"]:checked ~ label {
  color: #f5c518; /* gold when checked */
}


/* ensure the labels are not clipped */
.rating label {
  line-height: 1;
}

/* accessibility: focus styles */
.rating input[type="radio"]:focus + label {
  outline: 2px solid #ffd966;
  outline-offset: 3px;
}

/* Display-only stars (for listings) */
.star { display: inline-block; font-size: 16px; line-height: 1; color: #e6e6e6; position: relative; }
.star::before { content: '★'; }
.star.full::before { color: #f5c518; }
.star.half::before { /* simulate half by gradient */
  background: linear-gradient(90deg, #f5c518 50%, #e6e6e6 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.star.empty::before { color: #e6e6e6; }
.card-body { padding: 8px 4px; display: flex; flex-direction: column; gap: 6px; }
.game-title { font-size: 1.05rem; margin: 0; }
.thumb { margin-bottom: 8px; }

@media (max-width: 600px) {
  .games-list.grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .game-thumb { height: 110px; }
}

/* Tag badges */
.tag-badge {
  display: inline-block;
  background: #eef6ff;
  color: #0366d6;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 0.8rem;
  margin: 2px 4px 0 0;
  text-decoration: none;
}
.tags-row, .game-tags { margin-top: 8px; }
.tag-badge:hover { background: #dbeeff; }

/* Preview popup styles */
.game-preview-popup { background: #fff; border: 1px solid #ddd; box-shadow: 0 18px 54px rgba(0,0,0,0.14); width: 420px; padding: 12px; border-radius: 8px; pointer-events: auto; transform-origin: top center; }
.game-preview .preview-carousel { position: relative; }
.game-preview .preview-slide { display: none; width: 100%; height: 240px; object-fit: cover; border-radius: 6px; }
.game-preview .preview-slide.active { display: block; }
.game-preview .prev, .game-preview .next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff; border: none; padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.game-preview .prev { left: 8px }
.game-preview .next { right: 8px }
.game-preview .preview-body { padding-top: 8px; }
.game-preview .preview-tags .tag-badge { margin-right: 6px; }

div.stars {
  width: 270px;
  display: inline-block;
}
input.star { display: none; }
label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}
input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}
input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}
input.star-1:checked ~ label.star:before { color: #F62; }
label.star:hover { transform: rotate(-15deg) scale(1.3); }
label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}

/* Emoji picker styles */
.emoji-picker-list { display: flex; gap: 6px; align-items: center; }
.emoji-picker-btn img { border-radius: 4px; }
.emoji-overlay img { width: 20px; height: 20px; vertical-align: middle; margin: 0 1px; }
.emoji-overlay { color: inherit; }
/* inline emoji used inside chat messages */
.emoji-inline { width: 20px; height: 20px; vertical-align: middle; margin: 0 1px; display: inline-block; }