/* ============================================================
   console.css - Sidebar Layout with Left Pop-Out Animation
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #030305; color: #eee; font-family: 'Audiowide', sans-serif; margin: 0; padding: 0; }
.page-console-wrapper { display: flex; height: 100vh; width: 100vw; overflow: hidden; background: #030305; }

/* ── LEFT PANEL (TV & CONSOLE) ── */
.c-left { flex: 0 0 55%; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #050508; }
.c-left::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg,transparent 0px,transparent 37px,rgba(0,0,0,.55) 37px,rgba(0,0,0,.55) 40px), repeating-linear-gradient(90deg,transparent 0px,transparent 77px,rgba(0,0,0,.35) 77px,rgba(0,0,0,.35) 80px); pointer-events: none; z-index: 1; }
.c-left::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent 0%, var(--sys-color, #bf00ff) 40%, var(--sys-color, #bf00ff) 60%, transparent 100%); opacity: .5; z-index: 2; }
.c-header { position: relative; z-index: 5; padding: 20px 24px 10px; display: flex; flex-direction: column; gap: 8px; }
.c-back-btn { font-family: 'Audiowide', sans-serif; font-size: 12px; color: #555; text-decoration: none; transition: color .2s; width: fit-content; }
.c-back-btn:hover { color: #fff; }
.c-title-box { display: flex; flex-direction: column; gap: 4px; }
.c-tagline { font-family: 'Press Start 2P', monospace; font-size: clamp(6px,.9vw,11px); color: #ffd700; letter-spacing: 3px; text-shadow: 0 0 8px rgba(255,215,0,.6); white-space: nowrap; margin-bottom: 4px; }
.c-brand-name { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(22px,4vw,58px); letter-spacing: -1px; margin: 0; background: linear-gradient(90deg, var(--sys-color) 0%, #fff 55%, var(--sys-color) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 20px var(--sys-color)); animation: shimmer 5s linear infinite, glitch 12s ease-in-out infinite; display: inline-block; line-height: 1.1; }
.c-cursor { -webkit-text-fill-color: var(--sys-color) !important; animation: blink 1.1s step-end infinite; font-size: .65em; vertical-align: middle; }

@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }
@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes glitch  { 0%,88%,100%{transform:translate(0)} 90%{transform:translate(-2px,1px);filter:drop-shadow(-3px 0 3px magenta) drop-shadow(3px 0 3px cyan)} 92%{transform:translate(2px,-1px)}94%{transform:translate(0)} }

.c-retro-setup { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 20px 40px; z-index: 3; }
.tv-wrapper { position: relative; width: 90%; max-width: 580px; z-index: 4; margin-bottom: 60px; transform: translateX(-5%); }
.tv-frame { background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); padding: 24px 30px 40px; border-radius: 12px; box-shadow: inset 0 2px 5px rgba(255,255,255,0.1), 0 20px 60px rgba(0,0,0,0.9), 0 0 40px color-mix(in srgb, var(--sys-color) 25%, transparent); border: 1px solid #333; position: relative; }
.tv-inner-bezel { background: #080808; padding: 12px; border-radius: 8px; box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 1px 1px rgba(255,255,255,0.05); border-bottom: 2px solid #222; }
.tv-screen { background: #020202; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px 16px 16px 16px / 12px 12px 12px 12px; overflow: hidden; position: relative; box-shadow: 0 0 20px rgba(255,255,255,0.05) inset; }
.tv-idle-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--sys-color); font-family: 'Press Start 2P', monospace; text-shadow: 0 0 10px var(--sys-color); opacity: 0.7; z-index: 1; }
.tv-idle-state span { font-size: clamp(10px, 1.5vw, 16px); margin-bottom: 10px; text-align: center; }
.tv-idle-state small { font-size: 10px; animation: pulse 1.5s infinite; color: #fff; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0} }
.tv-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; transition: opacity 0.3s ease; }
.tv-screen video.is-playing { opacity: 1; }
.tv-scanlines { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 4px, 6px 100%; z-index: 3; }
.tv-glare { position: absolute; top: -10%; left: -10%; right: -10%; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%); border-radius: 50%; pointer-events: none; z-index: 4; }
.tv-logo { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: 'Orbitron', sans-serif; font-size: 10px; color: #555; letter-spacing: 2px; }
.tv-led { position: absolute; bottom: 16px; left: 30px; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.c-hardware-img { position: absolute; bottom: 0%; right: 5%; width: 50%; max-width: 320px; object-fit: contain; z-index: 10; filter: drop-shadow(-10px 10px 20px rgba(0,0,0,0.9)) drop-shadow(0 0 20px color-mix(in srgb, var(--sys-color) 40%, transparent)); }
.c-img-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to top,#050508 0%,transparent 100%); z-index: 11; pointer-events: none; }

/* ── RIGHT PANEL (SIDEBAR ZONE) ── */
.c-right { flex: 0 0 45%; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #030305; border-left: 2px solid #111; }
.c-right-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, color-mix(in srgb, var(--sys-color) 12%, transparent) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.c-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 24px 12px; border-bottom: 1px solid #0e0e14; flex-shrink: 0; position: relative; z-index: 2; }
.c-search-input { flex: 1; background: rgba(255,255,255,.03); border: 1px solid #1a1a22; border-radius: 6px; padding: 9px 14px; color: #ccc; font-family: 'Audiowide', sans-serif; font-size: 12px; outline: none; transition: border-color .2s, box-shadow .2s; min-width: 100px; }
.c-search-input:focus { border-color: var(--sys-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sys-color) 20%, transparent); }
.c-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.c-game-count { font-family: 'Orbitron', sans-serif; font-size: 11px; color: #555; min-width: 24px; text-align: right; }
.c-sort-sel { background: rgba(255,255,255,.03); border: 1px solid #1a1a22; border-radius: 6px; padding: 8px 10px; color: #777; font-family: 'Audiowide', sans-serif; font-size: 11px; outline: none; cursor: pointer; }
.c-sort-sel:focus { border-color: var(--sys-color); }

/* ── SIDEBAR GAME LIST (VERTICAL, ANIMATE LEFT, WITH TEXT) ── */
.c-game-list { 
  flex: 1; 
  overflow-y: auto; 
  overflow-x: visible; 
  padding: 20px; 
  position: relative; 
  z-index: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
}

.c-game-list::-webkit-scrollbar { width: 4px; }
.c-game-list::-webkit-scrollbar-thumb { background: var(--sys-color); border-radius: 2px; }

/* הקפסולה: פוסטר מימין, טקסט באמצע, מונה משמאל */
.c-game-item { 
  display: flex; 
  flex-direction: row-reverse; /* זה מסדר אותם חכם מימין לשמאל */
  align-items: center; 
  gap: 20px; 
  padding: 12px 25px; 
  background: linear-gradient(90deg, rgba(15,15,18,0.2) 0%, rgba(20,20,25,0.9) 100%);
  border-right: 4px solid color-mix(in srgb, var(--sys-color) 30%, transparent); 
  border-radius: 8px;
  text-decoration: none; 
  position: relative; 
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  cursor: pointer; 
  min-height: 110px; 
  width: 100%;
}

.c-game-item::before { display: none; }

.c-game-item:hover { 
  background: linear-gradient(90deg, rgba(15,15,18,0.4) 0%, rgba(30,30,38,1) 100%);
  border-right: 6px solid var(--sys-color);
  transform: translateX(-35px) scale(1.02); 
  box-shadow: -15px 10px 25px rgba(0,0,0,0.6), 0 0 15px color-mix(in srgb, var(--sys-color) 30%, transparent);
  z-index: 10;
}

/* הפוסטר */
.c-game-logo { 
  display: block; 
  max-width: 130px; 
  max-height: 85px; 
  object-fit: contain; 
  object-position: right center;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.8)) brightness(0.9); 
  transition: filter .3s, transform .3s; 
  margin: 0; 
  z-index: 2;
}

.c-game-item:hover .c-game-logo { 
  filter: drop-shadow(-5px 5px 15px color-mix(in srgb, var(--sys-color) 60%, transparent)) brightness(1.15); 
  transform: translateX(-10px) scale(1.15) rotate(-3deg); 
}

/* אזור הטקסט החדש */
.c-game-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1; /* דוחף את מונה הצפיות לקצה השני */
  text-align: right; 
  z-index: 2;
}

/* שם המשחק */
.c-game-text { 
  font-family: 'Orbitron', sans-serif; 
  font-size: clamp(14px, 1.5vw, 18px); 
  font-weight: 700; 
  color: #ccc; 
  transition: color 0.3s, transform 0.3s; 
  margin: 0; 
  text-transform: uppercase;
}

/* כיתוב עזר - Play Now */
.c-game-sub {
  font-family: 'Audiowide', sans-serif;
  font-size: 10px;
  color: var(--sys-color);
  opacity: 0.6;
  letter-spacing: 2px;
  transition: opacity 0.3s, transform 0.3s;
}

.c-game-item:hover .c-game-text { 
  color: #fff; 
  transform: translateX(-10px); 
  text-shadow: 0 0 8px var(--sys-color);
}

.c-game-item:hover .c-game-sub {
  opacity: 1;
  transform: translateX(-10px); 
}

/* מונה צפיות */
.c-plays { 
  font-size: 11px; 
  color: #999; 
  background: rgba(0,0,0,0.4);
  border: 1px solid #333;
  padding: 6px 12px;
  border-radius: 20px;
  flex-shrink: 0; 
  text-align: center; 
  transition: all .2s; 
  margin: 0; 
  z-index: 2;
}

.c-game-item:hover .c-plays { 
  color: #fff;
  background: rgba(0,0,0,0.8);
  border-color: var(--sys-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sys-color) 40%, transparent);
}

.c-no-games, .c-no-results { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #444; text-align: center; padding: 60px 24px; margin: 0; }

@media (max-width: 820px) {
  .page-console-wrapper { flex-direction: column; height: auto; overflow: auto; }
  .c-left { flex: 0 0 auto; min-height: 40vh; }
  .c-right { flex: 1; min-height: 60vh; border-left: none; border-top: 2px solid #111; }
  .c-game-list { overflow: visible; padding: 15px; }
  .tv-wrapper { margin-bottom: 20px; transform: translateX(0); }
  .c-hardware-img { position: relative; width: 60%; right: auto; margin-top: -30px; }
  .c-retro-setup { flex-direction: column; padding-bottom: 20px; }
  .c-game-logo { max-height: 60px; max-width: 100px; }
  .c-game-item:hover { transform: translateX(-10px) scale(1.02); }
}