/*
Theme Name: OTV Gaming
Theme URI: https://otv.co.il
Author: OTV Team
Description: OTV - פורטל משחקים, Sidebar Layout
Version: 4.1.0
Text Domain: otv
Tags: gaming, rtl-language-support
*/

/* ============================================================
   RESET & VARIABLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sb-width:     220px;
  --topbar-h:     54px;
  --white:        #ffffff;
  --bg:           #f4f4f6;
  --border:       #e4e4e8;
  --accent:       #5c6bc0;
  --accent-light: #eef0fc;
  --text-dark:    #1a1a2e;
  --text-body:    #44445a;
  --text-muted:   #8888a0;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-pill:  999px;
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:    0 6px 24px rgba(0,0,0,0.11);
  --shadow-hover: 0 10px 32px rgba(0,0,0,0.15);
  --font:         'Assistant','Inter',system-ui,sans-serif;
  --tr:           0.18s ease;
}

html { font-size:16px; scroll-behavior:smooth; overflow-x:hidden; }
body { font-family:var(--font); background:var(--bg); color:var(--text-dark); line-height:1.5; direction:rtl; text-align:right; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button, input { font-family:inherit; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }

/* ============================================================
   LAYOUT
   #otv-wrapper = flex row: sidebar ימין + content שמאל
   ============================================================ */
#otv-wrapper {
  display: flex;
  flex-direction: row;       /* sidebar ימין, content שמאל */
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#otv-sidebar {
  width: var(--sb-width);
  min-width: var(--sb-width);
  min-height: 100vh;
  background: var(--white);
  border-left: 1px solid var(--border);  /* border בצד שמאל (כי sidebar בימין) */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 600;
  scrollbar-width: thin;
}

/* ============================================================
   CONTENT WRAP (כל מה שמשמאל לsidebar)
   ============================================================ */
#otv-content-wrap {
  flex: 1;
  width: 0;          /* חיוני: מונע מהcontent לגדול מעבר לsidebar */
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ============================================================
   TOPBAR (מובייל בלבד — מוסתר בדסקטופ)
   ============================================================ */
#otv-topbar {
  display: none;   /* מוסתר בדסקטופ */
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 500;
}

/* ============================================================
   MAIN
   ============================================================ */
#otv-main {
  padding: 22px 20px 48px;
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================================
   SIDEBAR — תוכן פנימי
   ============================================================ */

/* לוגו */
.sb-logo-link {
  display: block;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.sb-logo-img {
  width: 100%;
  max-width: 180px;
  height: auto;
  max-height: 130px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

/* חיפוש */
.sb-search-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sb-search-form {
  display: flex;
  height: 36px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--tr);
}
.sb-search-form:focus-within { border-color: var(--accent); }
.sb-search-btn {
  flex-shrink: 0;
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.sb-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0 8px;
  font-size: 0.82rem;
  color: var(--text-dark);
  outline: none;
  direction: rtl;
}
.sb-search-input::placeholder { color: var(--text-muted); }
.sb-search-results {
  position: absolute;
  top: calc(100% - 2px);
  right: 12px;
  left: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 999;
  overflow: hidden;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}

/* סקשן + דיוויידר */
.sb-section { display: flex; flex-direction: column; }
.sb-divider { height: 1px; background: var(--border); margin: 4px 0; }
.sb-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px 4px;
}

/* פריט בסיידבר */
.sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  color: var(--text-body);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  border-right: 3px solid transparent;
  transition: all var(--tr);
  direction: rtl;
}
.sb-item:hover { background: var(--accent-light); color: var(--accent); border-right-color: var(--accent); }
.sb-item.active { background: var(--accent-light); color: var(--accent); border-right-color: var(--accent); font-weight: 700; }
.sb-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }
.sb-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-count { font-size: 0.67rem; color: var(--text-muted); background: var(--bg); padding: 1px 6px; border-radius: var(--radius-pill); flex-shrink: 0; }
.sb-cats { padding-bottom: 24px; }

/* ============================================================
   HAMBURGER
   ============================================================ */
.otv-hamburger {
  width: 34px; height: 34px; background: none; border: none;
  cursor: pointer; display: flex; flex-direction: column;
  justify-content: center; gap: 5px; padding: 4px; flex-shrink: 0;
}
.otv-hamburger span { display: block; height: 2px; background: var(--text-dark); border-radius: 2px; transition: all 0.25s; }
.otv-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.otv-hamburger.open span:nth-child(2) { opacity: 0; }
.otv-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Topbar logo */
.topbar-logo-link { flex-shrink: 0; }

/* Topbar search */
.topbar-search-wrap { flex: 1; }
.topbar-search-form {
  display: flex; height: 34px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.ts-btn { flex-shrink:0; background:var(--accent); border:none; color:#fff; padding:0 12px; font-size:0.78rem; font-weight:700; cursor:pointer; }
.ts-input { flex:1; min-width:0; background:transparent; border:none; padding:0 8px; font-size:0.82rem; outline:none; direction:rtl; color:var(--text-dark); }
.ts-input::placeholder { color:var(--text-muted); }

/* Overlay */
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:550; }
.sb-overlay.show { display:block; }

/* ============================================================
   PAGE TITLES
   ============================================================ */
.otv-page-h1 { font-size:1.3rem; font-weight:800; color:var(--text-dark); margin-bottom:4px; }
.otv-page-h2 { font-size:1rem; font-weight:500; color:var(--text-muted); margin-bottom:20px; }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; direction:rtl; }
.section-title { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.section-link { font-size:0.8rem; font-weight:600; color:var(--accent); }
.section-link:hover { text-decoration:underline; }

/* ============================================================
   GAME GRID
   ============================================================ */
.games-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:12px; margin-bottom:28px; }
.games-grid-md { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
.games-grid-lg { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }

/* GAME CARD */
.game-card { border-radius:14px; overflow:hidden; cursor:pointer; background:var(--white); transition:transform var(--tr),box-shadow var(--tr); position:relative; border:1px solid var(--border); }
.game-card:hover { transform:translateY(-4px) scale(1.02); box-shadow:var(--shadow-hover); border-color:var(--accent); }
.game-card-thumb { width:100%; aspect-ratio:1/1; background:var(--accent-light); position:relative; overflow:hidden; }
.game-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.game-card:hover .game-card-thumb img { transform:scale(1.06); }
.game-card-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.game-card-play-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--tr); }
.game-card:hover .game-card-play-overlay { opacity:1; }
.play-btn-circle { width:38px; height:38px; background:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.95rem; color:var(--accent); }
.game-card-badge { position:absolute; top:6px; left:6px; background:#00bcd4; color:#fff; font-size:0.6rem; font-weight:700; padding:2px 7px; border-radius:999px; }
.game-card-title { font-size:0.78rem; font-weight:600; color:var(--text-dark); padding:6px 8px 7px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.category-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; margin-bottom:28px; }
.category-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:12px 8px 10px; text-align:center; cursor:pointer; transition:all var(--tr); text-decoration:none; display:block; }
.category-card:hover { border-color:var(--accent); background:var(--accent-light); transform:translateY(-2px); }
.cat-card-icon { font-size:1.8rem; margin-bottom:6px; display:block; line-height:1; }
.cat-card-name { font-size:0.74rem; font-weight:600; color:var(--text-body); }
.category-card:hover .cat-card-name { color:var(--accent); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.otv-breadcrumb { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text-muted); margin-bottom:16px; direction:rtl; }
.otv-breadcrumb a { color:var(--accent); }
.otv-breadcrumb a:hover { text-decoration:underline; }

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.cat-hero-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 22px; margin-bottom:18px; direction:rtl; }
.cat-hero-top { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.cat-hero-icon { font-size:1.8rem; }
.cat-hero-title { font-size:1.3rem; font-weight:800; }
.cat-hero-count { font-size:0.82rem; color:var(--text-muted); }
.cat-hero-desc { font-size:0.85rem; color:var(--text-muted); }

.category-top-text, .category-bottom-text { direction:rtl; text-align:right; color:var(--text-body); font-size:0.9rem; line-height:1.9; margin-bottom:16px; }
.category-top-text p, .category-bottom-text p { margin-bottom:1em; }
.category-top-text ul, .category-bottom-text ul { margin:0.4em 1.5em 1em 0; }
.category-top-text li, .category-bottom-text li { margin-bottom:0.4em; }
.category-top-text h2, .category-top-text h3, .category-bottom-text h2, .category-bottom-text h3 { margin:1em 0 0.5em; font-weight:700; }

/* ============================================================
   AD SLOTS
   ============================================================ */
.otv-ad-slot { background:var(--white); border:2px dashed var(--border); border-radius:var(--radius-md); min-height:90px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; margin:14px 0; overflow:hidden; }
.otv-ad-placeholder { background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f0f0f2 10px,#f0f0f2 20px) !important; }

/* ============================================================
   LOAD MORE
   ============================================================ */
.load-more-wrap { text-align:center; margin:8px 0 32px; }
.load-more-btn { display:inline-flex; align-items:center; gap:8px; background:var(--white); border:2px solid var(--border); border-radius:var(--radius-pill); padding:11px 28px; font-size:0.875rem; font-weight:600; color:var(--text-body); cursor:pointer; transition:all var(--tr); }
.load-more-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ============================================================
   BUTTONS
   ============================================================ */
.otv-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border-radius:var(--radius-pill); font-size:0.85rem; font-weight:600; cursor:pointer; border:none; transition:all var(--tr); }
.otv-btn-primary { background:var(--accent); color:#fff; }
.otv-btn-primary:hover { opacity:0.9; }

/* ============================================================
   FOOTER
   ============================================================ */
#otv-footer { background:var(--white); border-top:1px solid var(--border); padding:32px 20px 20px; }
.footer-inner { }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; margin-bottom:24px; direction:rtl; }
.footer-brand-name { font-size:1.2rem; font-weight:800; margin-bottom:8px; }
.footer-brand-name span { color:var(--accent); }
.footer-brand-desc { color:var(--text-muted); font-size:0.82rem; line-height:1.6; }
.footer-col { text-align:right; }
.footer-col-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:10px; }
.footer-nav-list { display:flex; flex-direction:column; gap:7px; }
.footer-nav-list a { font-size:0.82rem; color:var(--text-body); transition:color var(--tr); }
.footer-nav-list a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border); padding-top:16px; direction:rtl; }
.footer-copy { font-size:0.78rem; color:var(--text-muted); }

/* ============================================================
   TOAST
   ============================================================ */
.otv-toast { position:fixed; bottom:20px; left:20px; z-index:9999; background:var(--text-dark); color:#fff; border-radius:var(--radius-md); padding:12px 18px; font-size:0.875rem; font-weight:500; box-shadow:var(--shadow-md); transform:translateY(80px); opacity:0; transition:all 0.3s cubic-bezier(.34,1.56,.64,1); }
.otv-toast.show { transform:translateY(0); opacity:1; }

/* ============================================================
   VISUALLY HIDDEN
   ============================================================ */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================
   GAME SINGLE PAGE
   ============================================================ */
.sg-page { overflow-x:hidden; }
.sg-breadcrumb { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text-muted); margin-bottom:14px; direction:rtl; }
.sg-breadcrumb a { color:var(--accent); }

.sg-above {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  background: #1a1a2e;
  height: calc(100vh - 60px);
  min-height: 520px;
  max-height: 840px;
  overflow: hidden;
  margin: 0 -20px;
}
.sg-col-left, .sg-col-right { background:#0f0f1a; display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px; overflow:hidden; }
.sg-col-left-empty, .sg-col-right-empty { width:0!important; padding:0!important; overflow:hidden!important; min-width:0!important; }
.sg-col-game { display:flex; flex-direction:column; background:#000; }
.sg-embed-area { flex:1; position:relative; overflow:hidden; }
.sg-embed-area iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.sg-start-screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#1a1a2e; color:#fff; }
.sg-start-screen-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.2; }
.sg-start-content { position:relative; z-index:1; text-align:center; padding:20px; }
.sg-start-emoji { font-size:4rem; line-height:1; margin-bottom:10px; }
.sg-start-name { font-size:1.2rem; font-weight:800; margin-bottom:16px; }
.sg-play-btn { background:var(--accent); color:#fff; border:none; padding:13px 44px; border-radius:999px; font-size:1rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:10px; }
.sg-play-btn:hover { opacity:0.9; }
.sg-game-bar { background:var(--white); border-top:1px solid var(--border); padding:8px 14px; display:flex; align-items:center; gap:12px; direction:rtl; flex-shrink:0; min-height:52px; }
.sg-game-bar-info { margin-right:auto; text-align:right; }
.sg-game-bar-title { font-size:0.9rem; font-weight:700; }
.sg-game-bar-dev { font-size:0.75rem; color:var(--text-muted); }
.sg-game-bar-thumb { width:42px; height:42px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.sg-game-bar-thumb img { width:100%; height:100%; object-fit:cover; }
.sg-like-btn, .sg-dislike-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:0.72rem; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 8px; border-radius:8px; transition:all 0.15s; }
.sg-like-btn:hover { color:#4caf50; } .sg-dislike-btn:hover { color:#f44336; }
.sg-like-btn svg, .sg-dislike-btn svg { width:17px; height:17px; }
.sg-fullscreen-btn { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:0.8rem; color:var(--text-body); display:flex; align-items:center; gap:4px; }
.sg-fullscreen-btn:hover { border-color:var(--accent); }
.sg-side-card { width:100%; border-radius:10px; overflow:hidden; cursor:pointer; background:#1e1e32; transition:transform 0.15s; text-decoration:none; display:block; border:1px solid rgba(255,255,255,0.07); }
.sg-side-card:hover { transform:scale(1.04); }
.sg-side-card-thumb { width:100%; aspect-ratio:1/1; background:#252545; display:flex; align-items:center; justify-content:center; font-size:1.8rem; overflow:hidden; }
.sg-side-card-thumb img { width:100%; height:100%; object-fit:cover; }
.sg-side-card-name { font-size:0.67rem; font-weight:600; padding:4px 5px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
.sg-side-ad { width:100%; min-height:180px; background:#131320; border:1px dashed rgba(255,255,255,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.3); font-size:0.65rem; flex-shrink:0; overflow:hidden; }
.sg-below { padding:22px 0 44px; }
.sg-info-row-main { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start; direction:rtl; margin-bottom:20px; }
.sg-info-game-title { font-size:1.4rem; font-weight:800; margin-bottom:4px; }
.sg-info-developer { font-size:0.875rem; color:var(--text-muted); margin-bottom:14px; }
.sg-info-description { font-size:0.9rem; color:var(--text-body); line-height:1.9; direction:rtl; text-align:right; }
.sg-info-description p { margin-bottom:1.1em; }
.sg-info-description ul { margin:0.4em 1.5em 1em 0; }
.sg-info-description li { margin-bottom:0.4em; line-height:1.8; }
.sg-info-description h2, .sg-info-description h3 { margin:1em 0 0.5em; font-weight:700; }
.sg-info-thumb-wrap { width:190px; flex-shrink:0; position:relative; }
.sg-info-thumb { width:190px; height:190px; border-radius:var(--radius-lg); overflow:hidden; background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:4rem; }
.sg-info-thumb img { width:100%; height:100%; object-fit:cover; }
.sg-stats-row { display:flex; gap:10px; margin-bottom:16px; direction:rtl; flex-wrap:wrap; }
.sg-stat-pill { background:var(--white); border:1px solid var(--border); border-radius:999px; padding:6px 14px; display:flex; align-items:center; gap:7px; font-size:0.83rem; }
.sg-stat-pill-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; }
.sg-stat-pill-val { font-weight:700; }
.sg-stat-pill-lbl { color:var(--text-muted); font-size:0.75rem; }
.sg-details { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:0 16px; margin-bottom:16px; direction:rtl; }
.sg-detail-row { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); gap:12px; direction:rtl; }
.sg-detail-row:last-child { border-bottom:none; }
.sg-detail-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
.sg-detail-label { font-weight:700; font-size:0.875rem; min-width:110px; }
.sg-detail-value { font-size:0.875rem; color:var(--text-body); margin-right:auto; }
.sg-about { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:14px; }
.sg-about-title { font-size:0.95rem; font-weight:700; margin-bottom:2px; }
.sg-similar-section { margin-top:6px; }
.sg-similar-title { font-size:0.95rem; font-weight:700; margin-bottom:12px; direction:rtl; }
.sg-similar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.sg-sim-card { border-radius:var(--radius-md); overflow:hidden; cursor:pointer; background:var(--white); border:1px solid var(--border); transition:transform 0.15s,box-shadow 0.15s; text-decoration:none; display:block; }
.sg-sim-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.sg-sim-thumb { aspect-ratio:1/1; background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:2rem; overflow:hidden; }
.sg-sim-thumb img { width:100%; height:100%; object-fit:cover; }
.sg-sim-name { font-size:0.73rem; font-weight:600; padding:6px 7px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-dark); }
.sg-ad-leaderboard { background:var(--white); border:2px dashed var(--border); border-radius:var(--radius-md); min-height:90px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; margin:14px 0; }
.sg-new-badge { background:#00bcd4; color:#fff; font-size:0.7rem; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-block; margin-top:8px; }

/* Search results generic */
.otv-search-results { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); z-index:999; overflow:hidden; display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* מובייל: sidebar מוסתר, נפתח עם המבורגר */
  #otv-sidebar {
    position: fixed;
    right: 0; top: 0;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 600;
    height: 100vh;
  }
  #otv-sidebar.open {
    transform: translateX(0);
    box-shadow: -6px 0 24px rgba(0,0,0,0.15);
  }
  #otv-content-wrap { 
    width: 100% !important; 
    max-width: 100% !important;
    margin-right: 0 !important; 
  }
  #otv-topbar { display: flex; }
  #otv-main { padding: 14px 12px 40px; }
  /* עמוד משחק מובייל */
  body.single-game #otv-main { padding: 0 !important; }
  body.single-game .sg-above {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    width: 100% !important;
  }
  body.single-game .sg-col-left,
  body.single-game .sg-col-right { display: none !important; }
  body.single-game .sg-col-game { width: 100% !important; }
  body.single-game .sg-embed-area {
    width: 100% !important;
    height: 56.25vw !important;
    min-height: 200px !important;
    max-height: 380px !important;
  }
  .sg-below { padding: 16px 0 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sg-info-row-main { grid-template-columns: 1fr; }
  .sg-info-thumb-wrap { display: none; }
}

@media (min-width: 901px) {
  /* דסקטופ: sidebar קבוע */
  #otv-sidebar { position: sticky; top: 0; height: 100vh; transform: none !important; }
  #otv-content-wrap { width: 100% !important; margin-right: 0; }
  .otv-hamburger { display: none; }
  #otv-topbar { display: none !important; }
  .sg-above { grid-template-columns: 160px 1fr 160px; margin: 0 -20px; }
}

@media (max-width: 600px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(85px,1fr)); gap:8px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* כותרות דף הבית */
.otv-page-h1 {
  font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
  margin-bottom: 4px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.otv-page-h2 {
  font-size: 1.3rem; font-weight: 800; color: var(--text-dark);
  margin-bottom: 20px;
}