/* ==============================
   H5BROS - Game Page CSS
   ============================== */

.game-page-main { display: flex; flex-direction: column; gap: 0; padding: 0 4px; }

/* Breadcrumb */
.game-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.7); margin-bottom: 12px; flex-wrap: wrap; }
.game-breadcrumb a { color: rgba(255,255,255,0.85); }
.game-breadcrumb a:hover { color: #fff; }
.bc-current { color: #fff; }

/* Two-column layout */
.game-layout { display: grid; grid-template-columns: 1fr 220px; gap: 14px; align-items: start; }

/* Iframe box — fills the column width */
.game-iframe-box {
  position: relative; width: 100%; background: #000;
  border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.game-iframe-box.is-maximized { border-radius: 0; }
.game-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: #000; }

/* Spinner */
.game-spinner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: #0a1020; color: rgba(255,255,255,0.6);
  font-size: 0.85rem; font-weight: 600; z-index: 5;
}
.spinner-ring {
  width: 44px; height: 44px; border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #20c2d4; border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Control bar — matches iframe width */
.game-embed-wrap { display: flex; flex-direction: column; }
.game-control-bar {
  background: #fff; border-radius: 0 0 16px 16px; padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); margin-top: -2px;
  width: 100%;
}
.gcb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gcb-thumb { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: #e0e0ea; flex-shrink: 0; }
.gcb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gcb-title { font-size: 0.95rem; font-weight: 800; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.gcb-genres { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.gcb-genre-tag { padding: 1px 8px; background: #f0f0f8; border-radius: 99px; font-size: 0.68rem; font-weight: 700; color: #555; text-decoration: none; }
.gcb-genre-tag:hover { background: #e0e0f0; }
.gcb-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.gcb-btn {
  width: 36px; height: 36px; background: #f0f0f8; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #1a1a2e; cursor: pointer; border: 1.5px solid transparent;
  transition: 0.15s ease; font-family: var(--font-main); white-space: nowrap;
}
.gcb-btn--pill { width: auto; padding: 0 16px; font-size: 0.82rem; font-weight: 800; gap: 5px; border-radius: 99px; letter-spacing: 0.01em; }
.gcb-btn:hover { background: #e0e0f0; }
.gcb-btn--active { background: rgba(220, 50, 80, 0.12) !important; color: #dc3250 !important; border-color: rgba(220, 50, 80, 0.4) !important; }

/* Info Panels */
.game-info-panels { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.game-info-panel { background: rgba(255,255,255,0.18); border-radius: 14px; overflow: hidden; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.25); }
.game-info-panel-header { padding: 11px 16px; color: #fff; font-size: 0.875rem; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.15); }
.game-info-panel-body { padding: 12px 16px; }
.desc-text { font-size: 0.85rem; line-height: 1.75; color: rgba(255,255,255,0.85); white-space: pre-wrap; }

/* Sidebar */
.game-sidebar { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; }
.game-sidebar-label { font-size: 0.75rem; font-weight: 800; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 0; }
.game-sidebar-list { display: flex; flex-direction: column; gap: 8px; }
.sidebar-card {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.16); border-radius: 12px;
  padding: 6px 8px 6px 6px; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  text-decoration: none; border: 1px solid rgba(255,255,255,0.18);
}
.sidebar-card:hover { background: rgba(255,255,255,0.26); transform: scale(1.02); }
.sidebar-card-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #cde9ed; }
.sidebar-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-card-title { font-size: 0.75rem; font-weight: 700; color: #fff; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sidebar-see-all { font-size: 0.78rem; font-weight: 800; color: rgba(255,255,255,0.7); padding: 4px 0; text-align: center; display: block; transition: 0.15s ease; }
.sidebar-see-all:hover { color: #fff; }

/* Related carousel overflow containment */
.game-page-main .grid-section { overflow: hidden; min-width: 0; }
.game-page-main .carousel-track { min-width: 0; }

/* Responsive */
@media (max-width: 1100px) {
  .game-layout { grid-template-columns: 1fr 200px; gap: 12px; }
}

@media (max-width: 860px) {
  .game-layout { grid-template-columns: 1fr; }
  .game-page-main { padding: 0; }
  .game-sidebar { flex-direction: row; flex-wrap: wrap; position: static; margin-top: 8px; }
  .game-sidebar-list { flex-direction: row; flex-wrap: wrap; }
  .sidebar-card { flex: 0 0 calc(50% - 4px); }
}

@media (max-width: 600px) {
  .game-page-main { overflow-x: hidden; max-width: 100vw; }
  .game-iframe-box { border-radius: 10px; aspect-ratio: 16 / 9; }
  .game-control-bar { padding: 8px 10px; gap: 6px; border-radius: 0 0 10px 10px; flex-wrap: wrap; }
  .gcb-thumb { width: 32px; height: 32px; }
  .gcb-title { font-size: 0.82rem; max-width: calc(100vw - 180px); }
  .gcb-genres { display: none; }
  .gcb-actions { gap: 5px; }
  .gcb-btn--pill { width: 36px; height: 36px; padding: 0; border-radius: 10px; font-size: 1rem; }
  #like-btn .btn-label, #share-btn .btn-label { display: none; }
  .sidebar-card { flex: 0 0 100%; }
  .game-info-panels { overflow: hidden; }
  .game-info-panel { overflow: hidden; }
  .desc-text { word-break: break-word; overflow-wrap: break-word; white-space: normal; }
}